Difference between DOM parentNode and parentElement

javascript firefox dom
shabunc picture shabunc · Dec 31, 2011 · Viewed 150.3k times · Source

Can somebody in explain me in as simple as possible terms, what is the difference between classical DOM parentNode and newly introduced in Firefox 9 parentElement

Answer

lonesomeday picture lonesomeday · Dec 31, 2011

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.)

Related questions

How can I tell if a DOM element is visible in the current viewport?

Is there an efficient way to tell if a DOM element (in an HTML document) is currently visible (appears in the viewport)? (The question refers to Firefox.)

Read More
Does document.body.innerHTML = "" clear the web page?

When I refresh the page below in FF 3.0, I expected the web page to clear but it didn't. Why doesn't document.body.innerHTML = "" clear the page? UPDATE: I am trying to clear the previous screen during a refresh while the …

Read More
How do I programmatically click on an element in JavaScript?

In IE, I can just call element.click() from JavaScript - how do I accomplish the same task in Firefox? Ideally I'd like to have some JavaScript that would work equally well cross-browser, but if necessary I'll have different per-browser …

Read More