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

Question

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

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

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

Answer 1

您可以检查元素父级：

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


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

这是工作小提琴： http : //jsfiddle.net/vnxhQ/7/

Answer 2

到目前为止我看到的唯一可靠的方法是检查元素是否在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))

演示： http : //jsfiddle.net/doktormolle/LZUx3/

Answer 3

您可能正在寻找Node.isConnected 。

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 元素获取唯一选择器的想法，请参阅此问题。

Answer 5

这是假设您将设置可能的“可点击”元素的 id

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

之后..

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

Answer 6

您可以使用 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 元素。

Answer 7

只是为了增加一些东西：

这确实是 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/

编辑二：当然，如果我们不是在谈论链接或脚本元素（任何可能进入head ，而不是body ，我想这可能会正常工作：-/

Answer 8

也许实现 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