web-dev-qa-db-fra.com

Différence entre DOM parentNode et parentElement

Quelqu'un peut-il m'expliquer de la façon la plus simple possible, quelle est la différence entre un DOM classique parentNode et une nouvelle introduction dans Firefox 9 parentElement

javascriptfirefoxdom
415
shabunc

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

Dans la plupart des cas, c'est la même chose que parentNode. La seule différence vient du fait que la variable parentNode d'un nœud n'est pas un élément. Si tel est le cas, parentElement 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'élément <html> (document.documentElement) n'a pas de parent qui est un élément, parentElement est null. (Il existe d'autres cas, plus improbables, où parentElement pourrait être null, mais vous ne les rencontrerez probablement jamais.)

402
lonesomeday

Dans Internet Explorer, parentElement n'est pas défini pour les éléments SVG, alors que parentNode est défini.

83
speedplane

Utilisez .parentElement et 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>

Apparemment, le <html> de .parentNode est lié au Document . Ceci devrait être considéré comme un phail de décision car les documents ne sont pas des nœuds puisque les nœuds sont définis pour pouvoir être contenus par des documents et que les documents ne peuvent pas être contenus par des documents.

11
Pacerier

Edit: Une partie de ceci est faux. Voir les commentaires ci-dessous pour plus de détails

Tous les objets Element sont également des objets Node (car Element est un descendant de Node). Mais il existe une Node qui n'est pas un objet Element... the document. Donc, votre élément <html> a un nœud parent (document) mais il n’a pas d’élément parent.

La raison pour laquelle il est nécessaire d'utiliser parentElement au lieu de parentNode est que, HTML5 ne requiert pas strictement un élément <html>, de sorte que presque tous les éléments peuvent avoir un nœud parent sans avoir réellement un parent. élément. Donc, si ma page HTML ressemblait à ceci:

<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
  <p>This is some text from my page</p>
</div>
<footer>
  Copyright, me
</footer>

Alors, les éléments title, header, #body et footer auront leur parentNode comme document, mais leur parentElement sera nul. Seule la balise p aurait un parentElement, qui est #body. (Notez que je ne conseillerais pas cela en tant que structure de page ... tenez-vous-en à quelque chose de plus traditionnel.)

Vous pouvez le reproduire avec quelque chose comme ça:

if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}
4
Nathan MacInnes

Comme avec nextSibling et nextElementSibling , rappelez-vous simplement que les propriétés dont le nom est "element" renvoient toujours Element ou null. Les propriétés sans peuvent renvoyer aucun autre type de noeud.

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
3
Buksy