如何检查jQuery元素是否在DOM中？

假设我定义了一个元素

$foo = $('#foo');

然后我打电话

$foo.remove()

---

从某个事件中。我的问题是，如何检查$foo是否已从DOM中删除？我发现

$foo.is（':hidden'）

是有效的，但是如果我只调用

$foo.hide（）

我在键入问题时才意识到一个答案：Call>

$foo.parent()

如果已从DOM中删除

$f00

，则

$foo.parent（）.length==0

。否则，其长度将至少为1

[编辑：这并不完全正确，因为删除的元素仍然可以有父元素；例如，如果删除一个

，则其每个子元素仍将有一个父元素。请改用SLaks的答案。如下：

if (!jQuery.contains(document, $foo[0])) {
    //Element is detached
}

如果删除了元素的一个父元素（在这种情况下，元素本身仍将有一个父元素），此操作仍然有效。
如何执行此操作：

$element.parents('html').length > 0

同意佩罗的意见。也可以这样做：

$foo.parents().last().is(document.documentElement);

var isElementInDOM = (function($) {
  var docElt = document.documentElement, find,
      contains = docElt.contains ?
        function(elt) { return docElt.contains(elt); } :

        docElt.compareDocumentPosition ?
          function(elt) {
            return docElt.compareDocumentPosition(elt) & 16;
          } :
          ((find = function(elt) {
              return elt && (elt == docElt || find(elt.parentNode));
           }), function(elt) { return find(elt); });

  return function(elt) {
    return !!(elt && ((elt = elt.parent) == docElt || contains(elt)));
  };
})(jQuery);

由于我无法以评论的形式回复（我想这是太低的业力了），这里有一个完整的回复。最快的方法是轻松展开jQuery浏览器支持检查，并将常量因子减到最小

如图所示，代码如下所示：

$foo.parents().last().is(document.documentElement);

var isElementInDOM = (function($) {
  var docElt = document.documentElement, find,
      contains = docElt.contains ?
        function(elt) { return docElt.contains(elt); } :

        docElt.compareDocumentPosition ?
          function(elt) {
            return docElt.compareDocumentPosition(elt) & 16;
          } :
          ((find = function(elt) {
              return elt && (elt == docElt || find(elt.parentNode));
           }), function(elt) { return find(elt); });

  return function(elt) {
    return !!(elt && ((elt = elt.parent) == docElt || contains(elt)));
  };
})(jQuery);

这在语义上等同于jQuery.contains（document.documentElement，elt[0]）。
为什么不呢：
if（$（'#foo'）。length==0）.
？
我喜欢这种方法。没有jQuery，也没有DOM搜索。首先找到顶级父级（祖先）。然后看看那是否是documentElement

if($foo.nodeType ){ element is node type}

function ancestor(HTMLobj){
  while(HTMLobj.parentElement){HTMLobj=HTMLobj.parentElement}
  return HTMLobj;
}
function inTheDOM(obj){
  return ancestor(obj)===document.documentElement;
}

最有效的方式可能是：

document.contains(node); // boolean

这也适用于jQuery：

document.contains($element[0]); // var $element = $("#some-element")
document.contains(this[0]); // in contexts like $.each(), `this` is the jQ object

来源于

注意：




当元素从dom分离时，您可以只获得边界矩形，而不是迭代父元素，该矩形为全零

function isInDOM(element) {
    var rect=element.getBoundingClientRect();
    return (rect.top || rect.bottom || rect.height || rect.width)?true:false;
}

如果你想处理零顶部和零左侧零宽度和高度元素的边缘情况，你可以通过迭代父元素直到document.body
…除非删除的节点不是唯一的子节点@lvaro-这有什么关系？@patrick:我遗漏了什么吗？如果$foo.parent（）.length大于零？@lvaro-OP正在测试以确保从DOM中删除了
$foo
。如果成功删除，它将不再具有父元素。因此
$foo.parent（）.length==0
表示删除成功。$foo.closest（“body”）如果有人关心的话，@PerroAzul:我发现了一个更快的替代方法：性能是我对这个方法的直接关注点，感谢你链接基准@SLaks。所以它看起来像
$.contains（document.documentElement，$foo.get（0））
是最快的方法。有一种纯粹的DOM方法可以做到这一点，它在语法上更具可读性，我认为在性能方面非常类似：
document.contains（$foo[0]）
所有这些关于性能的讨论…？基准测试显示一种方法需要15微秒，另一种方法需要0.15微秒。但是，谁在乎呢？除非你做了十万次，否则你不会注意到任何差异。如果jQuery或JavaScript引擎得到优化，这一切都可能会改变。只要使用读到b的任何方法即可对你和将来需要维护你的代码的人来说，这是一个很大的挑战faster@stevematdavies问题是“如何测试给定jQuery对象中的元素是否在DOM中”，而不是“如何测试与给定选择器字符串匹配的元素是否在DOM中”@TrevorBurnham：平心而论，使用用于创建
$foo
的选择器重新查询，并检查重新查询是否匹配任何元素，在许多情况下似乎是解决问题的可行方案。由于jQuery和浏览器如何优化某些选择器，它甚至可能比其他一些解决方案更快（如通过ID）.@Matt$foo可能是内存中与DOM分离的元素，DOM中可能有一个匹配选择器的元素。寻找此问题答案的人可能想检查它是否在DOM中。从事类似工作的人显然知道如何查询DOM。有人是如何看待此答案的？回答很好+1（我推荐了一个版本，谢谢）虽然此代码片段可能会解决此问题，但它不会解释为什么或如何回答此问题。请注意，这确实有助于提高您文章的质量。请记住，您将在将来为读者回答此问题，而这些人可能不知道您的代码建议的原因。标记者/审阅者：这不是lso将隐藏元素识别为“不在DOM中”？例如，具有
display:none
的元素也没有boundingRect