Difference between DOM parentNode and parentElement
Can somebody explain in simple terms, what is the difference between classical DOM parentNode and newly introduced in Firefox 9 parentElement
parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages.
In most cases, it is the same as parentNode. The only difference comes when a node's parentNode is not an element. If so, parentElement is null.
As an example:
document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element
document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null
(document.documentElement.parentNode === document); // true
(document.documentElement.parentElement === document); // false
Since the <html> element (document.documentElement) doesn't have a parent that is an element, parentElement is null. (There are other, more unlikely, cases where parentElement could be null, but you'll probably never come across them.)
In Internet Explorer, parentElement is undefined for SVG elements, whereas parentNode is defined.
parentElement not being implemented for Node is well know (developer.mozilla.org/en-US/docs/Web/API/Node/…) but for SVGElement? I could also not reproduce this with document.createElement('svg').parentElement in IE 11.737.17763.0. Was this maybe fixed in the meantime?
Use .parentElement and you can't go wrong as long as you aren't using document fragments.
If you use document fragments, then you need .parentNode:
let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment
Also:
let div = document.getElementById('t').content.firstChild div.parentElement // null div.parentNode // document fragment
Apparently the <html>'s .parentNode links to the Document. This should be considered a decision phail as documents aren't nodes since nodes are defined to be containable by documents and documents can't be contained by documents.
Just like with nextSibling and nextElementSibling, just remember that, properties with "element" in their name always returns Element or null. Properties without can return any other kind of node.
console.log(document.body.parentNode, "is body's parent node"); // returns <html>
console.log(document.body.parentElement, "is body's parent element"); // returns <html>
var html = document.body.parentElement;
console.log(html.parentNode, "is html's parent node"); // returns document
console.log(html.parentElement, "is html's parent element"); // returns null
there is one more difference, but only in internet explorer. It occurs when you mix HTML and SVG. if the parent is the 'other' of those two, then .parentNode gives the parent, while .parentElement gives undefined.
undefined not null.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- What's the difference between using "let" and "var"?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- event.preventDefault() vs. return false
- What is the purpose of the var keyword and when should I use it (or omit it)?
- What is the difference between call and apply?
- What is the difference between substr and substring?
- What is the difference between null and undefined in JavaScript?
- What is the difference between Bower and npm?
parentElementwas a proprietary IE thing; I believe other browsers at the time (e.g., Netscape) supportedparentNodebut notparentElement. (Obviously, given I've mentioned Netscape, I'm talking about way back to IE5 and earlier...)documentfragment.firstChild.parentElement === nullcircleinside ag), in IE,parentElementwill be undefined, andparentNodewill be what you're looking for. :(