Question

我希望能够识别某个给定的DOM节点是否已经附加/插入到另一个节点，或者它是否是刚刚从document.createElement（）中删除的，并且还没有放在任何地方。

在大多数浏览器中，只需检查parentNode即可。

if (!node.parentNode) {
  // this node is not part of a larger document
}

但是，在Internet Explorer中，似乎新元素，即使在使用document.createElement（）创建后，也已经有了一个parentNode对象（类型为DispHTMLDocument ??）。

还有其他很好的跨浏览器和可靠的方法吗？

编辑：看起来Internet Explorer隐式创建了DocumentFragment（nodeType为11）并将其设置为节点的parentNode属性。

Answer 1

我认为，即使没有IE的弱点，检查parentNode的存在可能还不够。例如：

var d = document.createElement('div');
var s = document.createElement('span');
d.appendChild(s);
if (s.parentNode) {
    // this will run though it's not in the document
}

如果文档中有内容，那么最终其中一个祖先就是文档本身。试试这个，看看它是怎么回事：

function inDocument(node) {
    var curr = node;
    while (curr != null) {
        curr = curr.parentNode;
        if (curr == document) return true;
    }
    return false;
}

// usage: 
// if (inDocument(myNode)) { .. }

如果您只想检查某个深度 - 也就是说，您知道新创建的元素不会比IE的片段更嵌套，请尝试：

function inDocument(node, depth) {
    depth = depth || 1000;
    var curr = node;
    while ((curr != document) && --depth) {
        curr = curr.parentNode;
        if (curr == null) return false;
    }
    return true;
}

inDocument(myNode, 2);  // check only up to two deep.
inDocument(myNode);     // check up to 1000 deep.

Answer 2

我找到了自己问题的答案。抱歉!我最近似乎做了很多。

文档片段的nodeType为11，并且永远不会插入到文档中，因此您可以这样检查：

if (!node.parentNode || node.parentNode.nodeType == 11) {
  // this node is floating free
}

插入多个对等节点时，只需要一个Document片段。 IE隐式为所有新创建的节点创建一个。无论如何检查nodeType为11个工作。

Answer 3

DOM级别3为compareDocumentPosition引入了Node方法，该方法提供了两个节点如何相互关联的位置信息。其中一个返回值为DOCUMENT_POSITION_DISCONNECTED，表示节点未相互连接。可以使用此事实来检查节点是否未包含在另一个节点内：

Boolean(parent.compareDocumentPosition(descendant) & 16)

DOCUMENT_POSITION_DISCONNECTED = 0x01;
DOCUMENT_POSITION_PRECEDING    = 0x02;
DOCUMENT_POSITION_FOLLOWING    = 0x04;
DOCUMENT_POSITION_CONTAINS     = 0x08;
DOCUMENT_POSITION_CONTAINED_BY = 0x10;
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;

Google编写了一个contains函数的跨浏览器实现（我认为，没有提到IE），可以在http://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains找到。您可以使用它来检查给定节点是否是文档的后代

.contains(document, someNode)

Answer 4

你在哪个版本的IE中测试这个：


if (!node.parentNode) {
  // this node is not part of a larger document
}

或许对于旧版本的IE，您应该尝试：


if (!node.parentElement) {
  // this node is not part of a larger document
}

代替。

虽然在9上你会得到＆gt;＆gt; null＆lt;＆lt;两种方法都提供了尚未解析顶部创建的容器元素，而后者又被转换为＆gt;＆gt; false＆lt;＆lt;完全按照你的意愿。

Javascript：如何判断节点对象是否已插入到文档/其他元素中

4 个答案: