Différence entre l'objet Node et l'objet Element?

Je suis totalement confus entre l'objet Node et l'objet Element. document.getElementById()renvoie l'objet Element tandis que document.getElementsByClassName() renvoie l'objet NodeList (Collection d'éléments ou de nœuds?)

Si un div est un objet Element, qu'en est-il de l'objet Node div?

Qu'est-ce qu'un objet nœud?

L'objet document, l'objet élément et l'objet texte sont-ils également un objet nœud?

Selon le livre de David Flanagan «L'objet Document, ses objets éléments et objets texte sont tous des objets Node».

Alors, comment se fait-il qu'un objet puisse hériter des propriétés / méthodes de l'objet Element ainsi que de l'objet Node?

Si oui, je suppose que la classe Node et la classe Element sont liées dans l'arbre d'héritage prototypique.

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

A nodeest le nom générique de tout type d'objet dans la hiérarchie DOM. A nodepourrait être l'un des éléments DOM intégrés tels que documentou document.body, il pourrait s'agir d'une balise HTML spécifiée dans le HTML, telle que<input> ou <p>ou ce pourrait être un nœud de texte créé par le système pour contenir un bloc de texte à l'intérieur d'un autre élément . Donc, en résumé, a nodeest n'importe quel objet DOM.

Une element est un type spécifique de nodecar il existe de nombreux autres types de nœuds (nœuds de texte, nœuds de commentaire, nœuds de document, etc ...).

Le DOM se compose d'une hiérarchie de nœuds où chaque nœud peut avoir un parent, une liste de nœuds enfants et un nextSibling et previousSibling. Cette structure forme une hiérarchie arborescente. Le documentnœud aurait sa liste de nœuds enfants (le headnœud et le bodynœud). Le bodynœud aurait sa liste de nœuds enfants (les éléments de niveau supérieur dans votre page HTML) et ainsi de suite.

Donc, a nodeListest simplement une liste de type tableau de nodes.

Un élément est un type spécifique de nœud, qui peut être directement spécifié dans le HTML avec une balise HTML et peut avoir des propriétés comme an idou a class. peut avoir des enfants, etc ... Il existe d'autres types de nœuds tels que les nœuds de commentaire, les nœuds de texte, etc ... avec des caractéristiques différentes. Chaque nœud a une propriété .nodeTypequi indique de quel type de nœud il s'agit. Vous pouvez voir les différents types de nœuds ici (schéma de MDN ):

Vous pouvez voir un ELEMENT_NODEest un type particulier de nœud où la nodeTypepropriété a une valeur de 1.

Il document.getElementById("test")ne peut donc renvoyer qu'un seul nœud et il est garanti qu'il s'agit d'un élément (un type spécifique de nœud). Pour cette raison, il renvoie simplement l'élément plutôt qu'une liste.

Étant donné que document.getElementsByClassName("para")peut renvoyer plusieurs objets, les concepteurs ont choisi de renvoyer un nodeListcar c'est le type de données qu'ils ont créé pour une liste de plusieurs nœuds. Étant donné que ceux-ci ne peuvent être que des éléments (seuls les éléments ont généralement un nom de classe), c'est techniquement un nodeListqui ne contient que des nœuds d'élément type et les concepteurs auraient pu créer une collection nommée différemment qui était un elementList, mais ils ont choisi d'utiliser un seul type de collection, qu’elle contienne ou non des éléments.

EDIT: HTML5 définit un HTMLCollectionqui est une liste d'éléments HTML (pas n'importe quel nœud, seulement des éléments). Un certain nombre de propriétés ou de méthodes en HTML5 renvoient désormais unHTMLCollection . Bien qu'il soit très similaire dans l'interface à a nodeList, une distinction est maintenant faite en ce qu'il ne contient que des éléments, pas n'importe quel type de nœud.

La distinction entre un nodeList et an HTMLCollectiona peu d'impact sur la façon dont vous en utilisez un (pour autant que je sache), mais les concepteurs de HTML5 ont maintenant fait cette distinction.

Par exemple, la element.childrenpropriété renvoie une HTMLCollection en direct.

Nodeest de mettre en œuvre une structure arborescente, de sorte que ses méthodes sont pour firstChild, lastChild,childNodes , etc. Il est plus d'une classe pour une structure arborescente générique.

Et puis, certains Nodeobjets sont aussi des Elementobjets. Elementhérite de Node. Elementles objets représentent en fait les objets spécifiés dans le fichier HTML par les balises telles que <div id="content"></div>. La Elementclasse définit des propriétés et des méthodes telles que attributes, id, innerHTML, clientWidth, blur()etfocus() .

Certains Nodeobjets sont des nœuds de texte et ce ne sont pas des Elementobjets. Chaque Nodeobjet a une nodeTypepropriété qui indique de quel type de nœud il s'agit, pour les documents HTML:

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

Nous pouvons voir quelques exemples dans la console:

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

La dernière ligne ci-dessus montre que Elementhérite de Node. (cette ligne ne fonctionnera pas dans IE à cause de __proto__. Elle devra utiliser Chrome, Firefox ou Safari).

Soit dit en passant, l' documentobjet est le haut de l'arborescence des nœuds, et documentest un Documentobjet, et Documenthérite Nodeégalement de:

> Document.prototype.__proto__ === Node.prototype
  true

Voici quelques documents pour les classes Node et Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Meilleure source d'informations pour tous vos problèmes DOM

http://www.w3.org/TR/dom/#nodes

"Les objets implémentant l'interface Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction ou Comment (simplement appelés nœuds) participent à une arborescence."

http://www.w3.org/TR/dom/#element

"Les nœuds d'éléments sont simplement appelés éléments."

Noeud: http://www.w3schools.com/js/js_htmldom_nodes.asp

L'objet Node représente un seul nœud dans l'arborescence du document. Un nœud peut être un nœud d'élément, un nœud d'attribut, un nœud de texte ou tout autre type de nœud expliqué dans le chapitre Types de nœud.

Élément: http://www.w3schools.com/js/js_htmldom_elements.asp

L'objet Element représente un élément dans un document XML. Les éléments peuvent contenir des attributs, d'autres éléments ou du texte. Si un élément contient du texte, le texte est représenté dans un nœud de texte.

dupliquer :

• Quelle est la différence entre un élément et un nœud en XML?
• Pourquoi les nœuds et les éléments sont-ils différents en XML? Quelle était la justification?

Le nœud est utilisé pour représenter les balises en général. Divisé en 3 types:

Remarque sur les attributs: est le nœud qui, à l'intérieur, a des attributs. Exp:<p id=”123”></p>

Nœud de texte: est un nœud qui, entre l'ouverture et la fermeture, a un contenu texte contien. Exp:<p>Hello</p>

Nœud d'élément: est le nœud qui, à l'intérieur, a d'autres balises. Exp:<p><b></b></p>

Chaque nœud peut être de type simultanément, pas nécessairement uniquement d'un seul type.

L'élément est simplement un nœud d'élément.