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
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.)
Dans Internet Explorer, parentElement
n'est pas défini pour les éléments SVG, alors que parentNode
est défini.
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.
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;
}
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