Différence entre les DOM parentNode et parentElement

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

InformationsquelleAutor shabunc | 2011-12-31
  1. 436

    parentElement est nouveau pour Firefox 9 et DOM4, mais il a été présent dans tous les autres grands navigateurs pour les âges.

    Dans la plupart des cas, il est le même que parentNode. La seule différence vient quand un nœud parentNode n'est pas un élément. Si oui, parentElement est null.

    Comme un 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

    Depuis le <html> élément (document.documentElement) n'a pas un parent qui est un élément, parentElement est null. (Il y en a d'autres, plus rare, des cas où parentElement pourrait être null, mais vous aurez probablement jamais venir à travers eux.)

    • En d'autres termes, il est complètement inutile 99.999999999999% du temps. Qui a eu l'idée?
    • L'original de la parentElement a été un propriétaire IE chose; je crois que d'autres navigateurs à la fois (par exemple, Netscape) pris en charge parentNode mais pas parentElement. (Évidemment, étant donné que je l'ai mentionné Netscape, je parle de la voie du retour à IE5 et plus tôt...)
    • voir ma réponse. Si vous ne disposez pas d'un élément HTML, il pourrait être très utile. Il était donc inutile d'avoir à la fois avant de HTML5.
    • Non, voir mon commentaire sur votre réponse, vous avez mal interprété la spécification HTML5.
    • vous avez oublié documentfragment.firstChild.parentElement === null
    • Ce fut effectivement le cas précis que j'avais en tête la dernière phrase de ma réponse...
    • Je pensais que vous étiez la pensée de quelque chose d'obscur, comme vous avez une poignée sur un nœud dont le parent est un ProcessingInstruction 😀
    • Que je viens de découvrir, sur un élément SVG (comme un circle à l'intérieur d'un g), dans IE, parentElement sera pas défini, et parentNode seront ce que vous cherchez. 🙁
    • Je viens de découvrir ce ainsi et a eu un rapide sur google pour voir si je peux trouver une raison. Je ne peux pas trouver une raison, mais bien de savoir que je ne suis pas le seul....

    InformationsquelleAutor lonesomeday
  2. 87

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

    • honnêtement, je pense que c'est plus un commentaire plutôt qu'une réponse.
    • Probablement, mais c'est la raison pour laquelle je me suis cogné la tête contre la table pour une heure ou plus, jusqu'à ce que j'ai compris. Je soupçonne que beaucoup d'autres viennent à cette page après une semblable s'en cogner la tête.
    • Heureux c'est une réponse comme cela n'a aucun sens logique et m'a bloqué pendant un bon moment...
    • Il undefined aussi pour les nœuds de commentaires. Dans google Chrome, j'ai été heureux de se parent d'un commentaire, mais c'était pas défini dans IE.
    • Je ne pouvais pas trouver une source pour cela. parentElement pas être mis en œuvre pour Node est bien connu (developer.mozilla.org/en-US/docs/Web/API/Node/...) mais pour SVGElement? Je pourrais aussi ne pas reproduire ce avec document.createElement('svg').parentElement dans IE 11.737.17763.0. Était-ce peut-être résolu dans le temps?
    InformationsquelleAutor speedplane
  3. 11

    Utilisation .parentElement et vous ne pouvez pas vous tromper tant que vous n'êtes pas à l'aide de fragments de documents.

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

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

    Aussi:

    JS:

    let div = document.getElementById('t').content.firstChild
div.parentElement //null
div.parentNode //document fragment

    HTML:

    <template id="t"><div></div></template>

    Apparemment le <html>'s .parentNode des liens vers les Document. Cela devrait être considéré comme une décision phail que les documents ne sont pas des nœuds depuis nœuds sont définis être containable par les documents et les documents ne peuvent pas être contenues par des documents.

    InformationsquelleAutor Pacerier
  4. 4

    Edit: Certains de tout cela est faux. Voir les commentaires ci-dessous pour plus de détails

    Tous Element objets sont également Node objets (parce que Element est un descendant de Node). Mais il y a un Node qui n'est pas un Element... la document objet. Si votre <html> élément a un nœud parent ( document ), mais il n'a pas un parent de l'élément.

    La raison qu'il ya un besoin pour parentElement au lieu de parentNode est parce que, HTML5 n'est pas strictement besoin d'un <html> élément, de sorte que presque n'importe quel élément peut avoir un nœud parent sans avoir réellement un élément parent. 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>

    Puis le title, header, #body et footer éléments ont leur parentNode comme document, mais leur parentElement serait nulle. Seul le p balise serait avez un parentElement, qui est #body. (Notez que je ne le conseille pas cela comme une structure de page... en tenir à quelque chose de plus traditionnel.)

    Vous pouvez le reproduire avec quelque chose comme ceci:

    if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}
    • "parce que, HTML5 n'est pas strictement besoin d'un <html> élément" ce n'est Pas vrai, vous avez mal interprété la spécification HTML5. Le html balise est optionnel, l'élément n'est pas, elle est toujours là si la balise est implicitement ou explicitement prévu. Détails dans l'Article 8 de la spec.
    • T. J. est droit. Si vous regardez à votre balisage à l'aide de quelque chose comme logiciel.hixie.ch/utilitaires/js/live-dom-viewer vous verrez que l'analyseur, en fait déduit <html> et <body> éléments dans cette affaire. Vous peut créer des situations où certains aléatoire balise qui n'est pas <html> est un enfant du document, mais vous devez le faire avec un script (dans les documents HTML; " random XML ce n'est pas vrai), et il prend un peu de travail.
    • Ah, je vois. Oui, j'ai mal interprété, après avoir lu ça il y a longtemps.
    • Il n'y a plus d'un nœud qui n'est pas un élément. Il existe 12 types de nœuds, dont l'une seulement est un élément.
    • De la foutaise. Le code prouve que parentNode est défini: jsfiddle.net/fg3pkgrw
    InformationsquelleAutor Nathan MacInnes
  5. 3

    Tout comme avec nextSibling et nextElementSibling, rappelez-vous que, propriétés avec "élément" dans leur nom renvoie toujours Element ou null. Propriétés de sans pouvez retourner n'importe quel 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
    • ouais, mais à la différence de nextsibling texte ou un commentaire nœuds ne peuvent pas être parent.
    InformationsquelleAutor Buksy
  6. 0

    il y a une différence, mais uniquement dans internet explorer. Il se produit lorsque vous mélanger HTML et SVG. si le parent est "l'autre" de ces deux, puis .parentNode donne à la mère, tandis que .parentElement donne pas défini.

    • Je pense que c'est undefined pas null.
    • Brian, en effet, mis à jour répondre
    InformationsquelleAutor mathheadinclouds