Différence entre DOM parentNode et parentElement

501

Quelqu'un peut-il m'expliquer en termes aussi simples que possible, quelle est la différence entre le DOM parentNode classique et nouvellement introduit dans Firefox 9 parentElement

javascript firefox dom shabunc
la source
stackoverflow.com/questions/2899196/what-is-this-parentelement
bugzilla.mozilla.org/show_bug.cgi?id=685798
4
parentNode semble être la norme DOM, il est donc plus sûr de toujours l'utiliser à la place de parentElement.
TMS
5
@TMS w3school n'est pas une autorité: w3fools.com
Guillaume Massé

Réponses:

487

parentElement est nouveau pour Firefox 9 et DOM4, mais il est présent dans tous les autres principaux navigateurs depuis des lustres.

Dans la plupart des cas, c'est la même chose que parentNode. La seule différence survient lorsqu'un nœud parentNoden'est pas un élément. Si oui, parentElementc'est null.

Par exemple:

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

Puisque l' <html>élément ( document.documentElement) n'a pas de parent qui est un élément, parentElementest null. (Il y a d'autres cas, plus improbables, où cela parentElementpourrait être null, mais vous ne les rencontrerez probablement jamais.)

solitaire
la source
162
En d'autres termes, c'est complètement inutile 99,999999999999% du temps. Quelle idée était-ce?
Niet the Dark Absol
25
L'original parentElementétait une chose IE propriétaire; Je crois que d'autres navigateurs à l'époque (par exemple, Netscape) étaient pris en charge parentNodemais pas parentElement. (Évidemment, étant donné que j'ai mentionné Netscape, je parle de retour à IE5 et plus tôt ...)
nnnnnn
9
@lonesomeday que vous avez oubliédocumentfragment.firstChild.parentElement === null
Raynos
7
@Raynos C'était en fait la circonstance précise que j'avais en tête avec la dernière phrase de ma réponse ...
lonesomeday
17
Comme je viens de le découvrir, sur un élément SVG (comme un circleintérieur a g), dans IE, parentElementne sera pas défini et parentNodesera ce que vous recherchez. :(
Jason Walton
94

Dans Internet Explorer, parentElementn'est pas défini pour les éléments SVG, alors qu'il parentNodeest défini.

speedplane
la source
10
Honnêtement, je pense que c'est plus un commentaire qu'une réponse.
shabunc
39
Probablement, mais c'est la raison pour laquelle je me suis cogné la tête contre la table pendant une heure ou plus jusqu'à ce que je le comprenne. Je soupçonne que beaucoup d'autres viennent sur cette page après un coup de tête similaire.
speedplane
3
@speedplane Heureux, c'est une réponse car cela n'a aucun sens logique et m'a fait perplexe pendant un bon moment ...
Superphonic
1
Il n'est pas non plus défini pour les nœuds de commentaire. Dans Chrome, je recevais avec plaisir le parent d'un commentaire, mais il n'était pas défini dans IE.
Simon_Weaver
Je n'ai pas pu trouver de source pour cela. parentElementn'est pas implémenté pour Nodeest bien connu ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) mais pour SVGElement? Je ne pouvais pas non plus reproduire cela avec document.createElement('svg').parentElementIE 11.737.17763.0. Cela a-t-il été résolu entre-temps?
epsilon
14

Utilisez .parentElementet vous ne pouvez pas vous tromper tant que vous n'utilisez pas de fragments de document.

Si vous utilisez des fragments de document, vous avez besoin de .parentNode:

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

Aussi:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id="t"><div></div></template>
Développer l'extrait

Apparemment , les <html>s » .parentNodeliens vers le document . Cela devrait être considéré comme une phase de décision car les documents ne sont pas des nœuds, car les nœuds sont définis pour être contenus par des documents et les documents ne peuvent pas être contenus par des documents.

Pacerier
la source
6

Tout comme avec nextSibling et nextElementSibling , rappelez-vous juste que, les propriétés avec "élément" dans leur nom retournent toujours Elementou null. Les propriétés sans peuvent renvoyer tout autre type de nœud.

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
la source
1
oui, mais contrairement au texte ou aux commentaires, les nœuds ne peuvent pas être parents.
Jasen
0

il y a encore une différence, mais uniquement dans Internet Explorer. Cela se produit lorsque vous mélangez HTML et SVG. si le parent est «l'autre» de ces deux, alors .parentNode donne le parent, tandis que .parentElement donne undefined.

mathheadinclouds
la source
1
Je pense que undefinednon null.
Brian Di Palma