Differenza tra DOM parentNode e parentElement

Qualcuno può spiegarmi in termini il più semplici possibile, qual è la differenza tra il classico ParentNode DOM e quello appena introdotto in Firefox 9 parentElement

parentElement è una novità di Firefox 9 e DOM4, ma è presente in tutti gli altri principali browser da anni.

Nella maggior parte dei casi, è lo stesso di parentNode. L'unica differenza arriva quando un nodo parentNodenon è un elemento. Se è così, lo parentElementè null.

Come esempio:

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

Poiché l' <html>elemento ( document.documentElement) non ha un genitore che è un elemento, lo parentElementè null. (Ci sono altri casi, più improbabili, dove parentElementpotrebbero essere null, ma probabilmente non li incontrerai mai.)

In Internet Explorer, parentElementnon è definito per gli elementi SVG, mentre parentNodeè definito.

Usa .parentElemente non puoi sbagliare fintanto che non stai usando frammenti di documenti.

Se si utilizzano frammenti di documenti, è necessario .parentNode:

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

Anche:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment

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

Apparentemente <html>i .parentNodecollegamenti al documento . Questo dovrebbe essere considerato una decisione decisiva poiché i documenti non sono nodi poiché i nodi sono definiti come contenibili da documenti e i documenti non possono essere contenuti da documenti.

Proprio come con nextSibling e nextElementSibling , basta ricordare che le proprietà con "element" nel loro nome restituiscono sempre Elemento null. Le proprietà senza possono restituire qualsiasi altro tipo di nodo.

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

c'è un'altra differenza, ma solo in Internet Explorer. Si verifica quando si mescolano HTML e SVG. se il genitore è "l'altro" di quei due, allora .parentNode fornisce il genitore, mentre .parentElement dà undefined.