it-swarm.com.de

Unterschied zwischen DOM parentNode und parentElement

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

415
shabunc

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

In den meisten Fällen ist es dasselbe wie parentNode. Der einzige Unterschied besteht darin, dass das parentNode eines Knotens kein Element ist. Wenn ja, ist parentElementnull.

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

Seit der <html> Element (document.documentElement) hat kein übergeordnetes Element, parentElement ist null. (Es gibt andere, eher unwahrscheinliche Fälle, in denen parentElementnull sein könnte, aber Sie werden wahrscheinlich nie auf sie stoßen.)

402
lonesomeday

In Internet Explorer ist parentElement für SVG-Elemente undefiniert, während parentNode definiert ist.

83
speedplane

Verwenden .parentElement 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>

Anscheinend die <html> 's .parentNode verweist auf Dokument . Dies sollte als Entscheidungsfehler angesehen werden, da Dokumente keine Knoten sind, da Knoten so definiert sind , dass sie in Dokumenten enthalten sein können, und Dokumente nicht in Dokumenten enthalten sein können.

11
Pacerier

Edit: Einiges davon ist falsch. Siehe Kommentare unten für Details

Alle Element Objekte sind auch Node Objekte (da Element ein Nachkomme von Node ist). Es gibt jedoch ein Node, das kein Element... das document -Objekt ist. Also dein <html> -Element hat einen übergeordneten Knoten (document), aber kein übergeordnetes Element.

Der Grund, warum parentElement anstelle von parentNode benötigt wird, ist, dass HTML5 kein <html> -Element, sodass fast jedes Element einen übergeordneten Knoten haben kann, ohne tatsächlich ein übergeordnetes Element zu haben. Also, wenn meine HTML-Seite so aussah:

<!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>

Dann die title, header, #body und footer -Elemente hätten ihr parentNode als document, aber ihr parentElement wäre null. Nur das p -Tag hätte ein parentElement, das #body. (Beachten Sie, dass ich dies nicht als Seitenstruktur empfehlen würde ... bleiben Sie bei etwas traditionelleren.)

Sie können es mit so etwas replizieren:

if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}
4
Nathan MacInnes

Denken Sie genau wie bei nextSibling und nextElementSibling daran, dass Eigenschaften mit dem Namen "element" immer Element oder null zurückgeben. 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
3
Buksy