Diferencia entre DOM parentNode y parentElement

501

¿Alguien puede explicarme en términos lo más simples posibles, cuál es la diferencia entre el DOM parentNode clásico y el recién introducido en Firefox 9 parentElement

javascript firefox dom shabunc
fuente
stackoverflow.com/questions/2899196/what-is-this-parentelement
bugzilla.mozilla.org/show_bug.cgi?id=685798
44
parentNode parece ser el estándar DOM, por lo que es más seguro usarlo siempre en lugar de parentElement.
TMS
55
@TMS w3school no es una autoridad: w3fools.com
Guillaume Massé

Respuestas:

487

parentElement es nuevo en Firefox 9 y DOM4, pero ha estado presente en todos los demás navegadores importantes durante años.

En la mayoría de los casos, es lo mismo que parentNode. La única diferencia viene cuando un nodo parentNodeno es un elemento. Si es así, parentElementes null.

Como ejemplo:

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

Dado que el <html>elemento ( document.documentElement) no tiene un elemento primario que sea un elemento, parentElementes null. (Hay otros casos, más improbables, en los que parentElementpodría haber null, pero probablemente nunca los encontrará).

solitario
fuente
162
En otras palabras, es completamente inútil el 99.999999999999% del tiempo. ¿De quién fue la idea?
Niet the Dark Absol
25
El original parentElementera una cosa propietaria de IE; Creo que otros navegadores en ese momento (por ejemplo, Netscape) admitían parentNodepero no parentElement. (Obviamente, dado que he mencionado Netscape, estoy hablando de volver manera de IE5 y anteriores ...)
nnnnnn
99
@lonesomeday olvidastedocumentfragment.firstChild.parentElement === null
Raynos
77
@Raynos Esa fue en realidad la circunstancia precisa que tenía en mente con la última oración de mi respuesta ...
lonesomeday
17
Como acabo de descubrir, en un elemento SVG (como un circleinside a g), en IE, parentElementno estará definido, y parentNodeserá lo que estás buscando. :(
Jason Walton
94

En Internet Explorer, parentElementno está definido para elementos SVG, mientras que parentNodeestá definido.

Speedplane
fuente
10
Sinceramente, creo que esto es más un comentario que una respuesta.
shabunc
39
Probablemente, pero es la razón por la que me golpeé la cabeza contra la mesa durante una hora o más hasta que lo descubrí. Sospecho que muchos otros vienen a esta página después de un golpe similar.
Speedplane
3
@speedplane feliz de que esto es una respuesta ya que esto no tiene sentido lógico y me tenía confundido por un buen tiempo ...
superfónicos
1
También está indefinido para los nodos de comentarios. En Chrome, recibí el comentario de un padre, pero no estaba definido en IE.
Simon_Weaver
No pude encontrar una fuente para eso. parentElementno se implementa para Nodees bien conocido ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) pero para SVGElement? Tampoco pude reproducir esto document.createElement('svg').parentElementen IE 11.737.17763.0. ¿Se solucionó esto mientras tanto?
epsilon
14

Use .parentElementy no puede equivocarse mientras no esté usando fragmentos de documentos.

Si usa fragmentos de documentos, entonces necesita .parentNode:

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

También:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id="t"><div></div></template>
Expandir fragmento

Aparentemente los enlaces de <html>'s .parentNodeal documento . Esto se debe considerar un proceso de decisión ya que los documentos no son nodos, ya que los nodos están definidos para que los documentos puedan contenerlos y los documentos no pueden estar contenidos en ellos.

Pacerier
fuente
6

Al igual que con nextSibling y nextElementSibling , solo recuerde que las propiedades con "elemento" en su nombre siempre devuelven Elemento null. Las propiedades sin pueden devolver cualquier otro tipo de 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
fuente
1
sí, pero a diferencia del siguiente texto o los nodos de comentarios no pueden ser padres.
Jasen
0

Hay una diferencia más, pero solo en Internet Explorer. Ocurre cuando mezclas HTML y SVG. si el padre es el 'otro' de esos dos, entonces .parentNode da el padre, mientras que .parentElement da indefinido.

Mathheadinclouds
fuente
1
Creo que undefinedno lo es null.
Brian Di Palma el