Unterschied zwischen DOM parentNode und parentElement

501

Kann mir jemand so einfach wie möglich erklären, was der Unterschied zwischen klassischem DOM parentNode und neu in Firefox 9 parentElement neu eingeführt ist

javascript firefox dom shabunc
quelle
stackoverflow.com/questions/2899196/what-is-this-parentelement
bugzilla.mozilla.org/show_bug.cgi?id=685798
4
parentNode scheint DOM-Standard zu sein, daher ist es sicherer, ihn immer anstelle von parentElement zu verwenden.
TMS
5
@TMS w3school ist keine Autorität: w3fools.com
Guillaume Massé

Antworten:

487

parentElement ist neu in Firefox 9 und in DOM4, aber es ist seit Ewigkeiten in allen anderen gängigen Browsern vorhanden.

In den meisten Fällen ist es dasselbe wie parentNode. Der einzige Unterschied besteht darin, dass ein Knoten parentNodekein Element ist. Wenn ja, parentElementist null.

Als Beispiel:

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

Da das <html>Element ( document.documentElement) kein übergeordnetes Element hat, parentElementist es ein Element null. (Es gibt andere, eher unwahrscheinliche Fälle, in denen parentElementdies der Fall sein könnte null, aber Sie werden wahrscheinlich nie auf sie stoßen.)

einsamer Tag
quelle
162
Mit anderen Worten, es ist in 99,99999999999999% der Fälle völlig sinnlos. Wessen Idee war es?
Niet the Dark Absol
25
Das Original parentElementwar eine proprietäre IE-Sache; Ich glaube, dass andere Browser zu der Zeit (z. B. Netscape) unterstützt werden, parentNodeaber nicht parentElement. (Angesichts der Tatsache, dass ich Netscape erwähnt habe, spreche ich natürlich von einem Weg zurück zu IE5 und früher ...)
nnnnnn
9
@ Lonesomeday Sie vergessendocumentfragment.firstChild.parentElement === null
Raynos
7
@ Raynos Das war eigentlich der genaue Umstand, den ich mit dem letzten Satz meiner Antwort im Sinn hatte ...
einsamer Tag
17
Wie ich gerade herausgefunden habe, ist ein SVG-Element (wie ein circleInside-A g) im IE parentElementundefiniert und parentNodegenau das, wonach Sie suchen. :(
Jason Walton
94

In Internet Explorer parentElementist für SVG-Elemente undefiniert, während parentNodedefiniert ist.

Geschwindigkeitsflugzeug
quelle
10
Ehrlich gesagt denke ich, dass dies eher ein Kommentar als eine Antwort ist.
Shabunc
38
Wahrscheinlich, aber es ist der Grund, warum ich meinen Kopf eine Stunde oder länger gegen den Tisch schlug, bis ich es herausgefunden hatte. Ich vermute, dass viele andere nach einem ähnlichen Headbangen auf diese Seite kommen.
Speedplane
3
@speedplane Glad Dies ist eine Antwort , da dies keinen logischen Sinn macht und hatte mich für eine gute stapfte während ...
superphonic
1
Es ist auch für Kommentarknoten undefiniert. In Chrome bekam ich glücklich das übergeordnete Element eines Kommentars, aber es war im IE undefiniert.
Simon_Weaver
Ich konnte keine Quelle dafür finden. parentElementNicht implementiert zu sein Nodeist bekannt ( developer.mozilla.org/en-US/docs/Web/API/Node/… ), aber für SVGElement? Ich konnte dies auch nicht mit document.createElement('svg').parentElementin IE 11.737.17763.0 reproduzieren. Wurde das vielleicht in der Zwischenzeit behoben?
Epsilon
14

Verwenden .parentElementSie und Sie können nichts falsch machen, solange Sie keine Dokumentfragmente verwenden.

Wenn Sie Dokumentfragmente verwenden, benötigen Sie .parentNode:

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

Ebenfalls:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id="t"><div></div></template>
Erweitern Sie das Snippet

Anscheinend ist die <html>s‘ .parentNodeLinks zu dem Dokument . Dies sollte als Entscheidungsfehler angesehen werden, da Dokumente keine Knoten sind, da Knoten als in Dokumenten enthalten definiert sind und Dokumente nicht in Dokumenten enthalten sein können.

Pacerier
quelle
6

Denken Sie genau wie bei nextSibling und nextElementSibling daran, dass Eigenschaften mit "element" im Namen immer Elementoder zurückgeben null. Eigenschaften ohne können jede andere Art von Knoten zurückgeben.

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
Buksy
quelle
1
Ja, aber im Gegensatz zu nextsibling Text oder Kommentar Knoten können nicht übergeordnet sein.
Jasen
0

Es gibt noch einen Unterschied, aber nur im Internet Explorer. Es tritt auf, wenn Sie HTML und SVG mischen. Wenn das übergeordnete Element das 'andere' dieser beiden Elemente ist, gibt .parentNode das übergeordnete Element an, während .parentElement undefiniert angibt.

Mathheadinclouds
quelle
1
Ich denke es ist undefinednicht null.
Brian Di Palma