Question

所有

我对DOM很新，我想知道我是否引用了可能从DOM树中删除的DOM元素，如何检查它是否仍然被挂载？

像：

var div = document.createElement("DIV");
document.body.appendChild(div);

然后我可能会选择<div>元素并删除，但是这个操作只是从树中卸载那些，div变量仍然指向那个DOM元素，我想知道是否有一个函数要测试div仍然在页面上（安装在DOM树上）或不是？

Answer 1

你可以试试这个

document.body.contains(yourDiv)

contains方法将返回true或false

Answer 2

如果某个节点是文档的一部分，则其ddof=1属性将为字符串URL，否则为baseURI

null

在devtools节目的这个页面上运行：

var div = document.createElement("DIV"), 
u1=div.baseURI, u2, u3; //first url, un-attached
document.body.appendChild(div);
u2=div.baseURI; //second url, attached
div.remove();
u3=div.baseURI; //third url, detached
alert(JSON.stringify([u1,u2,u3], null, 2));

这意味着要确定某个节点是否已附加，您只需询问[ null, "http://stackoverflow.com/questions/34640316/how-to-know-if-a-dom-element-mounted-to-tree", null ]：

elm.baseURI

Answer 3

ВолодимирЯременко的答案是正确的，但作为替代方法，您可以检查div是否有父节点。

if (theDiv.parentNode==null) {
  // Not in the DOM tree
}
else {
  // in the DOM tree!
}

在将其附加到正文之前将其为null，并且在将其从正文中删除之后将再次为空。

Answer 4

根据Mr Lister的改进版本。

function isMounted(node) {
    if (node.nodeType === Node.DOCUMENT_NODE) return true;
    if (node.parentNode == undefined) return false;
    return isMounted(node.parentNode);
}

Answer 5

您可以使用Node.isConnected

div.isConnected

注意：这不适用于旧的浏览器（Internet Explorer，Edge <79，Safari <10）

如何知道DOM元素是否挂载到树上

5 个答案: