HTML element is attached to a document

问题

When an element is removed from the DOM using removeChild(), the reference to the element still exist but the element is no more in the DOM.
How to know if an HTML element (or its parents) is still attached to a document ?

回答1:

From 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>

I only tested in Opera though.

There are alternatives on that page too.

回答2:

Node.prototype.contains() is the answer:

if(document.body.contains(yourElement)) {
    // Yep, it's attached.
}

Compatibility: IE5+

回答3:

Keep checking the element's parentNode until you get to the document or run out of nodes.

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

回答4:

Check for its parentNode property if it's directly attached to the document. It's null if there is no such parent element and otherwise a reference to the parent element.

The next code illustrates its usage, it prints null, [Object HTMLBodyElement] and null.

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

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

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

Note again that this only applies to elements which have been removed using removeChild, if a parent element was removed, you would have to check the parentNode property on that parent element.

To find out if an element is really part of a document, you would have to check if the uppermost parent element is 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;
}

回答5:

For newer browsers (no IE support), you can use Node.isConnected, which is a property on Node and returns a boolean.

Mozilla Node.isConnected

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

来源：https://stackoverflow.com/questions/5649534/html-element-is-attached-to-a-document

标签

javascript

html

dom