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é

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