Question

使用removeChild()从DOM中删除元素时，对该元素的引用仍然存在，但该元素不再存在于DOM中。
如何知道HTML元素（或其父元素）是否仍附加到文档？

Answer 1

this就是答案：

Hibernate

兼容性：IE5 +

Answer 2

继续检查元素的parentNode，直到找到文档或用完节点。

function is_element_in_document ( element ) {
    if (element === document) {
        return true;
    }
    element = element.parentNode;
    if (element) {
        return is_element_in_document ( element );
    }
    return false;
}

Answer 3

检查其parentNode属性是否直接附加到文档。如果没有这样的父元素，则为null，否则为父元素的引用。

下一个代码说明了它的用法，它会打印null，[Object HTMLBodyElement]和null。

var elm = document.createElement("p");
alert(elm.parentNode);

document.body.appendChild(elm);
alert(elm.parentNode);

elm.parentNode.removeChild(elm);
alert(elm.parentNode);

再次注意，这仅适用于使用removeChild删除的元素，如果删除了父元素，则必须检查该父元素上的parentNode属性。

要确定某个元素是否真的是文档的一部分，您必须检查最上面的父元素是否为document。

function element_is_part_of_document(element) {
    /* as long as the element is not document, and there is a parent element */
    while (element != document && element.parentNode) {
        /* jump to the parent element */
        element = element.parentNode;
    }
    /* at this stage, the parent is found. If null, the uppermost parent element */
    /* is not document, and therefore the element is not part of the document */
    return element == document;
}

Answer 4

来自http://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function contains(parent, descendant) {
                return parent == descendant || Boolean(parent.compareDocumentPosition(descendant) & 16);
            }
            window.addEventListener("DOMContentLoaded", function() {
                var p = document.getElementById("test");
                //document.body.removeChild(p);
                alert(contains(document, p));
            }, false);
        </script>
    </head>
    <body>
        <p id="test">test</p>
    </body>
</html>

我只在Opera中测试过。

该页面上也有替代品。

Answer 5

对于较新的浏览器（不支持IE），可以使用Node.isConnected，它是Node上的一个属性，并返回一个布尔值。

Mozilla Node.isConnected

document.querySelectorAll('#myElement').isConnected;

HTML元素附加到文档

5 个答案: