HTML element is attached to a document
When an element is removed from the DOM using removeChild(), the reference to the element s开发者_JS百科till exist but the element is no more in the DOM.
You can use Node#contains() to check whether the element is inside a specific document or another element:
if(document.contains(yourElement)) {
// Yep, it's attached to the current document
}
Or Node#isConnected to check whether the it's connected to any document:
if(yourElement.isConnected) {
// Yep, it's attached to any documents
}
Notes for elements inside a Shadow DOM:
.contains()requiresgetRootNode()calls to get to the top-most element in the main document, maybe recursively:document.contains(yourElement.getRootNode().host).isConnectedwill betrueeven if the element isn't connected to the maindocument, for example if it's inside a Shadow DOM or an iframe that are not inside the current document.
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;
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;
}
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;
}
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.
加载中,请稍侯......
精彩评论