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

Question

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

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

Qu'est-ce qu'un objet Node ?

L'objet document, l'objet élément et l'objet texte sont-ils également des objets Node ?

Selon le livre de David Flanagan, "L'objet Document, ses objets élémentaires et les 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 prototypique d'héritage.

 <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]

Answer 1

A node est le nom générique de tout type d'objet dans la hiérarchie DOM. A node pourrait être l'un des éléments DOM intégrés tels que document o document.body il peut s'agir d'une balise HTML spécifiée dans le code HTML, telle que <input> o <p> Il peut aussi s'agir d'un nœud de texte créé par le système pour contenir un bloc de texte dans un autre élément. Donc, en résumé, un node est un objet DOM quelconque.

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

Le DOM consiste en 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 site document Le nœud a le html comme son enfant. Le site html a sa liste de nœuds enfants (le nœud head et le body nœud). Le site body aurait sa liste de nœuds enfants (les éléments de premier niveau dans votre page HTML) et ainsi de suite.

Donc, un nodeList est simplement une liste de nodes .

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

Vous pouvez voir un ELEMENT_NODE est un type particulier de nœud où le nodeType a une valeur de 1 .

Alors document.getElementById("test") ne peut retourner qu'un seul noeud et il est garanti qu'il s'agit d'un élément (un type spécifique de noeud). Pour cette raison, elle renvoie juste l'élément plutôt qu'une liste.

Desde document.getElementsByClassName("para") peut renvoyer plus d'un objet, les concepteurs ont choisi de renvoyer un objet de type nodeList car c'est le type de données qu'ils ont créé pour une liste de plus d'un nœud. Puisqu'il ne peut s'agir que d'éléments (seuls les éléments ont généralement un nom de classe), il s'agit techniquement d'une classe nodeList qui ne contient que des nœuds de type élément, et les concepteurs auraient pu créer une collection portant un nom différent, qui serait un elementList mais ils ont choisi d'utiliser un seul type de collection, qu'elle ne contienne que des éléments ou non.

---

EDITAR: HTML5 définit un HTMLCollection qui 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 de HTML5 renvoient maintenant un fichier de type HTMLCollection . Bien que son interface soit très similaire à celle d'un nodeList Une distinction est maintenant faite en ce sens qu'il ne contient que des éléments, et non un quelconque type de nœud.

La distinction entre un nodeList et un HTMLCollection a 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, le element.children renvoie un HTMLCollection vivant.

Answer 2

Element hérite de Node de la même manière que Dog hérite de Animal .

En Element objet "is-a" Node de la même manière qu'un objet Dog objet "is-a" Animal objet.

Node sert à mettre en œuvre une structure arborescente, et ses méthodes sont donc destinées à firstChild , lastChild , childNodes etc. Il s'agit plutôt d'une classe pour une structure arborescente générique.

Et puis, certains Node Les objets sont également Element objets. Element hérite de Node . Element représente en fait les objets tels que spécifiés dans le fichier HTML par les balises telles que <div id="content"></div> . Le site Element définissent des propriétés et des méthodes telles que attributes , id , innerHTML , clientWidth , blur() y focus() .

Quelques Node sont des nœuds de texte et ils ne sont pas Element objets. Chaque Node a un nodeType 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 Element hérite de Node . (cette ligne ne fonctionnera pas dans IE en raison de la présence de __proto__ . Vous devrez utiliser Chrome, Firefox ou Safari).

D'ailleurs, le document est le sommet de l'arbre des nœuds, et l'objet document est un Document et Document hérite de Node également :

> 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

Answer 3

La meilleure source d'information pour tous vos problèmes de DOM

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

Objets implémentant les types Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, ou Comment (simplement appelés noeuds) participent à un arbre.

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

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

Answer 4

Nœud : http://www.w3schools.com/js/js_htmldom_nodes.asp

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

É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, celui-ci est représenté dans un text-node.

duplicata :

• 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 en est la raison ?

Answer 5

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

Note d'attribut : est un noeud dont l'intérieur possède des attributs. Exp : <p id=”123”></p>

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

Nœud élémentaire : c'est un nœud qui contient d'autres balises. Exp : <p><b></b></p>

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

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