Diferença entre DOM parentNode e parentElement

501

Alguém pode me explicar da forma mais simples possível, qual é a diferença entre o DOMN clássico do pai e o recém-introduzido no 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 parece ser o padrão DOM, portanto, é mais seguro sempre usá-lo em vez de parentElement.
TMS
5
@TMS w3school não é uma autoridade: w3fools.com
Guillaume Massé

Respostas:

487

parentElement é novo no Firefox 9 e no DOM4, mas está presente em todos os outros principais navegadores há muito tempo.

Na maioria dos casos, é o mesmo que parentNode. A única diferença ocorre quando o nó parentNodenão é um elemento. Se sim, parentElementé null.

Como um exemplo:

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

Desde que o <html>elemento ( document.documentElement) não tem um pai que é um elemento, parentElementé null. (Existem outros casos, mais improváveis, onde parentElementpoderia estar null, mas você provavelmente nunca os encontrará.)

lonesomeday
fonte
162
Em outras palavras, é completamente inútil 99,999999999999% do tempo. De quem foi a idéia?
Niet the Dark Absol
25
O original parentElementera uma coisa proprietária do IE; Acredito que outros navegadores da época (por exemplo, Netscape) sejam compatíveis, parentNodemas não parentElement. (Obviamente, uma vez que eu mencionei Netscape, eu estou falando de caminho de volta para IE5 e anteriores ...)
nnnnnn
9
@lonesomeday you esqueceudocumentfragment.firstChild.parentElement === null
Raynos
7
@Raynos Isso foi realmente a circunstância preciso que eu tinha em mente com a última frase da minha resposta ...
lonesomeday
17
Como acabei de descobrir, em um elemento SVG (como um circleinterno a g), no IE, parentElementserá indefinido e parentNodeserá o que você está procurando. :(
Jason Walton
94

No Internet Explorer, parentElementé indefinido para elementos SVG, enquanto parentNodeestá definido.

speedplane
fonte
10
Sinceramente, acho que isso é mais um comentário do que uma resposta.
shabunc
38
Provavelmente, mas é a razão pela qual bati minha cabeça contra a mesa por uma hora ou mais, até que entendi. Suspeito que muitos outros acessem esta página após um golpe de cabeça semelhante.
speedplane
3
@speedplane Fico feliz esta é uma resposta que isso não faz sentido lógico e tinha-me perplexo por um bom tempo ...
superphonic
1
Também indefinido para nós de comentários. No Chrome, eu estava felizmente recebendo o pai de um comentário, mas ele não estava definido no IE.
Simon_Weaver 18/09/19
Não consegui encontrar uma fonte para isso. parentElementnão está sendo implementado para Nodeé bem conhecido ( developer.mozilla.org/en-US/docs/Web/API/Node/… ), mas para SVGElement? Também não pude reproduzir isso document.createElement('svg').parentElementno IE 11.737.17763.0. Talvez isso tenha sido corrigido enquanto isso?
Epsilon
14

Use .parentElemente você não pode dar errado desde que não esteja usando fragmentos de documento.

Se você usar fragmentos de documento, precisará .parentNode:

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

Além disso:

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

Aparentemente, o <html>'s .parentNodelinks para o documento . Isso deve ser considerado um processo de decisão, pois os documentos não são nós, pois os nós são definidos para serem contidos por documentos e os documentos não podem ser contidos por documentos.

Pacerier
fonte
6

Assim como em nextSibling e nextElementSibling , lembre-se de que as propriedades com "elemento" em seu nome sempre retornam Elementou null. Propriedades sem podem retornar qualquer outro tipo de nó.

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
Sim, mas ao contrário dos nós de texto ou comentário próximos não podem ser os pais.
Jasen
0

Há mais uma diferença, mas apenas no Internet Explorer. Isso ocorre quando você mistura HTML e SVG. se o pai for o 'outro' desses dois, .parentNode fornecerá o pai, enquanto .parentElement fornecerá indefinido.

mathheadinclouds
fonte
1
Eu acho que undefinednão é null.
Brian Di Palma