web-dev-qa-db-fra.com

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 élément Element, qu’en est-il de l’objet div Node?

Qu'est-ce qu'un objet Node?

L'objet de document, l'objet Element et l'objet Text sont-ils également des objets Node?

Selon le livre de David Flanagan, "L'objet Document, ses objets Element et les objets Text 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 Node La classe et la classe d'élément sont liées dans l'arborescence d'héritage prototype.

 <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]
javascripthtmldom
242
P K

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

element est un type spécifique de node car 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 noeuds où chaque noeud peut avoir un parent, une liste de noeuds enfants et un nextSibling et previousSibling. Cette structure forme une hiérarchie arborescente. Le nœud document aurait sa liste de nœuds enfants (le nœud head et le nœud body). Le nœud body aurait sa liste de nœuds enfants (les éléments de niveau supérieur de votre page HTML) et ainsi de suite.

Ainsi, nodeList est simplement une liste de nodes semblable à un tableau.

Un élément est un type spécifique de nœud, qui peut être spécifié directement dans le code HTML avec une balise HTML et peut avoir des propriétés telles que id ou class. peut avoir des enfants, etc ... Il existe d'autres types de nœuds tels que des nœuds de commentaire, des nœuds de texte, etc. avec des caractéristiques différentes. Chaque nœud 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 ):

enter image description here

Vous pouvez voir qu'un ELEMENT_NODE est un type particulier de nœud pour lequel la propriété nodeType a une valeur de 1.

Ainsi, document.getElementById("test") ne peut renvoyer qu'un seul nœud et il est garanti qu’il s’agit d’un élément (type de nœud spécifique). 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 nodeList car il s'agit du type de données qu'ils ont créé pour une liste de plusieurs nœuds. Comme ils ne peuvent être que des éléments (seuls les éléments ont généralement un nom de classe), il s’agit techniquement d’un 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 simplement choisi un type de collection, qu’il ne contienne que des éléments ou non.

EDIT: HTML5 définit un HTMLCollection qui est une liste d'éléments HTML (pas n'importe quel nœud, uniquement des éléments). Un certain nombre de propriétés ou de méthodes de HTML5 renvoient maintenant un HTMLCollection. Bien que son interface soit très similaire à celle de nodeList, on distingue maintenant le fait qu’elle ne contient que des éléments, pas un type de nœud quelconque.

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

Par exemple, la propriété element.children renvoie une collection HTMLC en direct.

412
jfriend00

Node est destiné à l'implémentation d'une arborescence. Ses méthodes s'appliquent donc à firstChild, lastChild, childNodes, etc. Il s'agit davantage d'une classe pour une arborescence générique.

Et puis, certains objets Node sont également des objets Element. Element hérite de Node. Les objets Element représentent en réalité les objets spécifiés dans le fichier HTML par les balises telles que <div id="content"></div>. La classe Element définit des propriétés et des méthodes telles que attributes, id, innerHTML, clientWidth, blur() et focus().

Certains objets Node sont des nœuds de texte et ne sont pas des objets Element. Chaque objet Node a une propriété 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 __proto__. Vous devrez utiliser Chrome, Firefox ou Safari).

En passant, l'objet document est le sommet de l'arborescence de nœuds et document est un objet Document, et Document hérite également de Node:

> 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

55
太極者無極而生

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

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

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

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

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

7
Matt Esch

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 Node Types.

Elé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 nœud de texte.

dupliquer:

6
Jerome Cance

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

Attribut Note: est le nœud qui à l'intérieur possède des attributs. Exp: <p id=”123”></p>

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

L'élément Node: est un nœud qui contient d'autres balises. Exp: <p><b></b></p>

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

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

2
hecarim