如何检查从DOM中检索到的元素是否仍然存在于DOM中？

Question

假设我有一个DOM元素作为事件的参数，例如点击事件。

$(document).click(function() {
    myElement = $(this);
});

我如何在稍后检查myElement是否仍在DOM中？我无法使用.length或其他类似的东西，因为它仍然指向保存的元素和此时DOM的状态，对吗？

- Valentin Fournier

Answer 1

您可能正在寻找Node.isConnected。

- aryzing

Answer 2

您可以检查元素的父级：

function isInDom(obj) {
    var root = obj.parents('html')[0] 
    return !!(root && root === document.documentElement);
}


if(isInDom(myElement)) {
     ...
}

这是一个可以正常工作的代码示例：http://jsfiddle.net/vnxhQ/7/

- Inferpse

---

这个测试用例检测的是元素在被存储时是否有父级元素，而不是元素是否仍然存在于DOM中。 - jbabey

myElement 需要是一个包装该元素的 jQuery 对象，但是我不认为这与存储时间有任何关系。 - JayC

啊...但是DOM对象何时被jQuery包装了呢？ - JayC

@Inferpse，除非您编辑您的回答，否则它不会让我取消我的踩。请进行一次虚假编辑，我将把它改为赞。感谢您教给我一些东西！ - jbabey

一个元素可以有一个父级 body 元素，而不必成为文档的一部分：http://jsfiddle.net/doktormolle/vnxhQ/1/ - Dr.Molle

Answer 3

到目前为止，我认为唯一可靠的方法是检查该元素是否在document.getElementsByTagName('*')中。

function isInDoc(element)
{
  var elements=document.getElementsByTagName(element.tagName);
  for(var i=0;i<elements.length;++i)
  {
    if(elements[i]===element)return true;
  }
  return false;
}

示例：http://jsfiddle.net/doktormolle/hX8eN/

---

<edit>

Node.contains() 看起来被所有主流浏览器支持，所以我最终建议这样做：

if(document.documentElement.contains(myElement))

Demo: http://jsfiddle.net/doktormolle/LZUx3/

- Dr.Molle

---

啊...真的吗？那是很多标签。也许你可以将Inferpse的答案与您的答案合并，以测试该元素是否来自于body标签，以及测试该元素的body标签是否是文档的body标签。 - JayC

（或者文档可以有多个body标签吗？） - JayC

请看我的回答以了解我所说的意思。 - JayC

我明白你的意思。但我无法想象没有本地和简单的方法。Node.contains() 对我来说看起来不错。 - Dr.Molle

不错！但这种方法支持Firefox 9+吗？ - Inferpse

Answer 4

为了测试一个元素是否仍然存在于DOM中，你需要再次遍历DOM：

// store it in some shared scope
var myElement;
$(document).click(function() {
    myElement = $(this);
});

// sometime later...
if ($('#' + myElement.attr('id')).length > 0) {
    // it still exists
} else {
    // it no longer exists
}

为了使此方法生效，您所点击的元素必须都有 id 属性。不过，也可以使用类或其他选择器。

编辑：请参见 此问题 以获取任何给定 DOM 元素的唯一选择器的想法。

- jbabey

Answer 5

假设您已经设置了可能“可点击”元素的ID

var idRef;
$(document).on('click', function() {
    idRef = this.id;    
});

稍后再说...

var exists = document.getElementById(idRef).length > 0;

- st3inn

Answer 6

只是为了增加一些内容：

这实际上是Inferpse的答案稍微调整了一下，以适应Dr.Molle的特殊情况，即创建另一个body元素，该元素可能容纳从常规DOM树中删除的元素（或者，当然，该元素可能从未在DOM中出现过）。与Inferspe的答案一样，它接受一个jQuery包装对象，而不是元素本身。

function isInDom(jqobj) {
    var someBody = jqobj.parents('body');
    return someBody.length > 0 && someBody.get(0) === document.body;
}
​

我必须承认，我正在努力想象如何尝试打破它。

编辑：哦，是的... jsFiddle: http://jsfiddle.net/vnxhQ/5/

编辑 II：当然，如果我们不谈论链接或脚本元素（任何可能进入head而不是body的东西），我想那可能会很好 :-/

- JayC

Answer 7

也许更好的实现 Inferpse 函数的方法是通过扩展 jQuery：

jQuery.fn.extend({
    isInDom: function() {
        var root = this.eq(0).parents('html')[0];
        return !!(root && root === document.documentElement);
    }
})

使用方法：

$("div").isInDom() //returns true if your dom contains a div
$("<div />").isInDom() //returns false
$().isInDom() //returns false

- Marten Jacobs

Answer 8

你可以使用jQuery对象的未记录文档属性.selector来判断一个元素是否仍在DOM中，前提是它使用唯一的ID。 显然

http://jsfiddle.net/mblase75/CC2Vn/

$two = $('#two');
console.log($($two.selector).length); // 1
$two.remove();
console.log($($two.selector).length); // 0

请参阅此问题，了解有关如何获取jQuery对象的选择器的更多信息，该选择器可能或可能不唯一地描述其中包含的DOM元素。

- Blazemonger