Difference between DOM parentNode and parentElement

Question

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

http://stackoverflow.com/questions/2899196/what-is-this-parentelement — , Dec 31 '11 at 01:57
[parentNode](http://www.w3schools.com/dom/prop_node_parentnode.asp) seems to be DOM standard, so it is safer always use it instead of parentElement. — Tomas, Oct 11 '13 at 19:15
@GuillaumeMassé - Have a new look on w3fools. They now say that the errors/omissions they listed have been corrected. — Frank Conijn - Support Ukraine, Jul 05 '20 at 18:17
There's a lot of hate here directed toward `parentNode`. While `parentNode` might itself be a bit useless, remember that Nodes *are*, indeed, useful - they represent non-element parts of the DOM - comments, actual text, CDATA text, etc. ([More info](https://stackoverflow.com/q/9979172/114558)) — rinogo, Apr 04 '22 at 22:42

score 683 · Accepted Answer · edited Aug 21 '18 at 01:46

683

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

edited Aug 21 '18 at 01:46

Simon_Weaver

140,023
84
646
689

answered Dec 31 '11 at 01:58

lonesomeday

233,373
50
316
318

239

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

The original [`parentElement`](http://msdn.microsoft.com/en-us/library/ms534327(v=vs.85).aspx) 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 03:04
14

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

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

I thought you were thinking of something obscure like you have a handle on a node whose parent is a ProcessingInstruction :D – Raynos Jan 04 '12 at 16:14
31

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 03:27
3

@JasonWalton I have just discovered this as well and had a quick google to see if I can find a reason. I can't find a reason, but good to know I am not alone.... – superphonic Apr 05 '17 at 13:01
1

parentElement === null is very useful – xgqfrms Dec 22 '20 at 09:57

score 122 · Answer 2 · answered Mar 28 '16 at 20:13

122

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

answered Mar 28 '16 at 20:13

speedplane

15,673
16
86
138

15

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

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
4

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

It also undefined for comment nodes. In Chrome I was happily getting the parent of a comment, but it was undefined in IE. – Simon_Weaver Sep 18 '19 at 05:55
I could not find a source for that. `parentElement` not being implemented for `Node` is well know (https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement#Browser_compatibility) 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? – Sebastian Oct 01 '19 at 12:35

score 32 · Answer 3 · edited Aug 01 '22 at 06:12

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
console.log(div.parentElement)  // null
console.log(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 aren't nodes since nodes are defined to be containable by documents and documents can't be contained by documents.

score 12 · Answer 4 · edited Jul 30 '22 at 21:32

12

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.parentElement, "is body's parent element");//<html>
console.log(document.body.parentNode, "is body's parent node");      //<html>

var html = document.body.parentElement;
console.log(html.parentElement, "is html's parent element");         //null
console.log(html.parentNode, "is html's parent node");               //document

edited Jul 30 '22 at 21:32

Erman Kadir Kahraman

469
6
6

answered Aug 31 '17 at 09:02

Buksy

11,571
9
62
69

3

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

score 1 · Answer 5 · answered Jul 05 '23 at 09:55

Browser's DOM is a tree of Nodes. Node is an abstract interface, which most used implementation is Element, but it is not the only one.

Thus:

parentNode will return a Node's parent Node (if it has one)
parentElement will return a Node's parent only if it is an Element instance

mathheadinclouds · Answer 6 · 2019-10-01T13:23:46.387

0

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.

edited Oct 01 '19 at 13:23

answered Oct 01 '19 at 01:16

mathheadinclouds

3,507
2
27
37

2

I think it's `undefined` not `null`. – Brian Di Palma Oct 01 '19 at 12:02

Difference between DOM parentNode and parentElement

6 Answers6

Linked

Related