5

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

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

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

4

8 回答 8

5

您可以检查元素父级：

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


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

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

于 2012-10-08T16:50:44.183 回答
3

您可能正在寻找Node.isConnected.

于 2020-08-14T17:52:02.843 回答
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/

于 2012-10-08T17:15:54.650 回答
0

为了测试某个元素是否还存在于 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
}

但是，您单击的元素必须都具有ids 才能正常工作。可以使用类或任何其他选择器来代替。

编辑：有关如何为任何给定 DOM 元素获取唯一选择器的想法，请参阅此问题。

于 2012-10-08T16:58:43.853 回答
0

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

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

之后..

var exists = document.getElementById(idRef).length > 0;
于 2012-10-08T17:00:41.763 回答
0

您可以.selector使用 jQuery 对象的未记录属性来查看元素是否仍在 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 元素。

于 2012-10-08T17:07:15.193 回答
0

只是为了添加一些东西：

这确实是 Inferpse 的回答，针对 Dr.Molle 创建另一个可能包含从一般 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，我想这可能会正常工作：-/

于 2012-10-08T17:56:39.633 回答
0

实现 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
于 2014-03-28T10:06:15.957 回答