Difference between DOM parentNode and parentElement

Difference between DOM parentNode and parentElement



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





stackoverflow.com/questions/2899196/what-is-this-parentelement
– user1106925
Dec 31 '11 at 1:57





bugzilla.mozilla.org/show_bug.cgi?id=685798
– user1106925
Dec 31 '11 at 2:00





parentNode seems to be DOM standard, so it is safer always use it instead of parentElement.
– TMS
Oct 11 '13 at 19:15





@TMS w3school is not an authority: w3fools.com
– Guillaume Massé
Jul 25 '15 at 18:56




5 Answers
5



parentElement is new to Firefox 9 and to DOM4, but it has been present in all other major browsers for ages.


parentElement



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.


parentNode


parentNode


parentElement


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


<html>


document.documentElement


parentElement


null


parentElement


null





In other words, it's completely pointless 99.999999999999% of the time. Whose idea was it?
– Niet the Dark Absol
Dec 31 '11 at 2:33





The original parentElement was a proprietary IE thing; I believe other browsers at the time (e.g., Netscape) supported parentNode but not parentElement. (Obviously, given I've mentioned Netscape, I'm talking about way back to IE5 and earlier...)
– nnnnnn
Dec 31 '11 at 3:04



parentElement


parentNode


parentElement





@lonesomeday you forgot documentfragment.firstChild.parentElement === null
– Raynos
Jan 4 '12 at 14:38


documentfragment.firstChild.parentElement === null





@Raynos That was actually the precise circumstance I had in mind with the last sentence of my answer...
– lonesomeday
Jan 4 '12 at 16:08





As I have just discovered, on an SVG element (like a circle inside a g), in IE, parentElement will be undefined, and parentNode will be what you're looking for. :(
– Jason Walton
Mar 25 '15 at 3:27


circle


g


parentElement


parentNode



In Internet Explorer, parentElement is undefined for SVG elements, whereas parentNode is defined.


parentElement


parentNode





honestly I think this is more of a comment rather than an answer.
– shabunc
Mar 28 '16 at 20:15





Probably, but it's the reason I banged my head against the table for an hour or more until I figured it out. I suspect many others come to this page after a similar head-banging.
– speedplane
Apr 21 '16 at 20:54





@speedplane Glad this is an answer as this makes no logical sense and had me stumped for a good while...
– superphonic
Apr 5 '17 at 13:03




Edit: Some of this is wrong. See comments below for details



All Element objects are also Node objects (because Element is a descendent of Node). But there is a Node which isn't an Element... the document object. So your <html> element has a parent node (document) but it doesn't have a parent element.


Element


Node


Element


Node


Node


Element


document


<html>


document



The reason that there's a need for parentElement instead of parentNode is because, HTML5 doesn't strictly require an <html> element, so almost any element can have a parent node without actually having a parent element. So if my HTML page looked like this:


parentElement


parentNode


<html>


<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
<p>This is some text from my page</p>
</div>
<footer>
Copyright, me
</footer>



Then the title, header, #body and footer elements would have their parentNode as document, but their parentElement would be null. Only the p tag would have a parentElement, which is #body. (Note that I wouldn't advise this as a page structure... stick to something more traditional.)


title


header


#body


footer


parentNode


document


parentElement


p


parentElement


#body



You can replicate it with something like this:


if (myElement.parentNode instanceof Element)
myElement.parentElement = myElement.parentNode;
else
myElement.parentElement = null;





"because, HTML5 doesn't strictly require an <html> element" Not true, you've misinterpreted the HTML5 specification. The html tag is optional, the element is not, it's always there whether the tag is implied or explicitly provided. Details in Section 8 of the spec.
– T.J. Crowder
Jan 1 '12 at 18:54


<html>


html





@Nathan T.J. is right. If you actually look at your markup using something like software.hixie.ch/utilities/js/live-dom-viewer you'll see that the parser in fact infers <html> and <body> elements in that case. You can create situations where some random tag that's not <html> is a child of the document, but you have to do it with script (in HTML documents; for random XML this is not true), and it takes some work.
– Boris Zbarsky
Jan 1 '12 at 19:40


<html>


<body>


<html>





Ah, I see. Yes, I have mis-interpreted, having read that bit a long time ago.
– Nathan MacInnes
Jan 2 '12 at 0:14





There is more than one node that isn't an element. There are 12 different node types, only one of which is an element.
– RobG
Nov 2 '15 at 14:11






@NathanMacInnes, Rubbish. The code proves that parentNode is defined: jsfiddle.net/fg3pkgrw
– Pacerier
Sep 28 '17 at 14:50



Use .parentElement and you can't go wrong as long as you aren't using document fragments.


.parentElement



If you use document fragments, then you need .parentNode:


.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


<template id=t><div></div></template>



Apparently the <html>'s .parentNode links to the Document. This should be considered a decision phail as documents ain't Nodes since Nodes are defined to be containable by documents and documents can't be contained by documents.


<html>


.parentNode



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.


Element


null


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





yeah, but unlike nextsibling text or comment nodes can't be parent.
– Jasen
Sep 4 '17 at 2:25




Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?

-

Popular posts from this blog

Help:Category

Image
Help:Category From Wikipedia, the free encyclopedia Jump to navigation Jump to search For guidelines on the use of categories in Wikipedia, see Wikipedia:Categorization. For a basic readers' guide see Help:Categories. For quick answers, see the readers' FAQ or the editors' FAQ on categories. For a list of categories, see Special:Categories. This is an information page. It describes the editing community's established practice on some aspect or aspects of Wikipedia's norms and customs. It is not one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community. Shortcut H:CAT Wikipedia data structure Namespaces Subject namespaces Talk namespaces 0 (Main/Article) Talk 1 2 User User talk 3 4 Wikipedia Wikipedia talk 5 6 File File talk 7 8 MediaWiki MediaWiki talk 9 10 Template Template talk 11 12 Help Help talk 13 14 Category Category talk 15 100 Portal Portal talk 101 108 Book Book tal...
Read more

How can temperature be calculated given relative humidity and dew point?

Image
How can temperature be calculated given relative humidity and dew point? While looking into the better indicator of how miserable it feels outside, either dew point or relative humidity, I came across this statement: The optimum combination for human comfort is a dewpoint of about 60 F and a RH of between 50 and 70% (this would put the temperature at about 75 F). Source: http://www.theweatherprediction.com/habyhints/190/ This led me to this calculator that will calculate the temperature given relative humidity and dew point - for example a dew point of 70 degrees F and a relative humidity of 90% results in a temperature of 73.11 degrees F. The web site for this calculator says the values are based on the August-Roche-Magnus approximation and gives the following equation to calculate temperature: $T =243.04 Large fracfrac17.625 TD243.04+TD-lnleft(fracRH100right)17.625+lnleft(fracRH100right)- frac17.625 TD243.04+TD$ Given the equation I'm still having a hard time figuring out...
Read more

I have a recursive function to validate tree graph and need a return condition

Image
I have a recursive function to validate tree graph and need a return condition I have a tree graph. Each node has attribute 'amount'. The rule governing the attribute value of root is this, The root 'amount' value is the sum of the 'amount' attribute of each of it's children. This continues to the last node with children. In other words this tree's attributes are unlike a sum tree, because the root node is not the sum of each node in the tree. Here is a toy example as graph G: nodedict = 'apples': 'amount': 5.0, 'bananas': 'amount': 10.0, 'tomato': 'amount': 50.0, 'total_fruits': 'amount': 15.0, 'total_vegetables': 'amount': 9.0, 'carrot': 'amount': 3.0, 'squash': 'amount': 6.0, 'total_fruits_and_vegetables': 'amount': 74.0 edgelist = [('total_fruits', 'apples'), ('total_fruits', 'bananas...
Read more