Differenza tra DOM parentNode e parentElement

501

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

javascript firefox dom

— shabunc
fonte

stackoverflow.com/questions/2899196/what-is-this-parentelement

bugzilla.mozilla.org/show_bug.cgi?id=685798

4

parentNode sembra essere DOM standard, quindi è più sicuro usarlo sempre invece di parentElement.

— TMS,

5

@TMS w3school non è un'autorità: w3fools.com

— Guillaume Massé

487

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

— lonesomeday
fonte

162

In altre parole, è del tutto inutile il 99.999999999999% delle volte. Di chi è stata l'idea?

— Niet the Dark Absol,

25

L'originale parentElementera una cosa proprietaria di IE; Credo che altri browser all'epoca (ad es. Netscape) siano supportati parentNodema non parentElement. (Ovviamente, dato che ho menzionato Netscape, sto parlando di ritorno a IE5 e precedenti ...)

— nnnnnn

9

@lonesomeday hai dimenticatodocumentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos Questa era in realtà la circostanza precisa che avevo in mente con l'ultima frase della mia risposta ...

— lonesomeday

17

Come ho appena scoperto, su un elemento SVG (come un circleinterno a g), in IE, parentElementnon sarà definito e parentNodesarà ciò che stai cercando. :(

— Jason Walton,

94

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

— speedplane
fonte

10

onestamente penso che sia più un commento che una risposta.

— Shabunc,

39

Probabilmente, ma è la ragione per cui ho sbattuto la testa contro il tavolo per un'ora o più finché non l'ho capito. Sospetto che molti altri vengano su questa pagina dopo un simile colpo alla testa.

— speedplane il

3

@speedplane Glad questa è una risposta come questa non ha senso logico e mi aveva perplesso per un bel po '...

— superphonic

1

Inoltre, non definito per i nodi di commento. In Chrome stavo ottenendo felicemente il genitore di un commento, ma non era definito in IE.

— Simon_Weaver,

Non sono riuscito a trovare una fonte per questo. parentElementnon essere implementato per Nodeè ben noto ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) ma per SVGElement? Inoltre non ho potuto riprodurre questo con document.createElement('svg').parentElementIE 11.737.17763.0. Forse è stato risolto nel frattempo?

— epsilon

14

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>

Espandi frammento

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.

— Pacerier
fonte

6

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

— Buksy
fonte

1

sì, ma a differenza dei nodi di testo o commenti vicini non possono essere genitori.

— Jasen,

0

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.

— mathheadinclouds
fonte

1

Penso di undefinedno null.

— Brian Di Palma,