Différence entre un objet nodal et un objet élément?

je suis totalement confus entre L'objet de noeud et l'objet D'élément. document.getElementById() renvoie L'élément object tandis que document.getElementsByClassName() renvoie L'objet NodeList (Collection D'éléments ou de noeuds?)

si un div est un objet Element alors qu'en est-il de l'objet Div Node?

Qu'est-ce qu'un objet Node?

Sont l'objet document, Élément de l'objet et de l'Objet de Texte sont également l'objet de Nœud?

selon le livre de David Flanagan L'objet Document, Son Élément Objets et les objets texte sont tous les objets de Nœud'.

alors comment se fait-il qu'un objet puisse hériter des propriétés/méthodes de L'objet Element aussi bien que de L'objet Node?

si oui, je suppose que la classe du noeud et la classe de L'élément sont liées dans l'arbre prototypique de l'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]
186
demandé sur piperchester 2012-04-02 19:28:14
la source

5 ответов

A node est le nom générique de tout type d'objet dans la hiérarchie DOM. Un node pourrait être l'un des éléments DOM intégrés tels que document ou document.body , ce pourrait être une balise HTML spécifiée dans le HTML tel que <input> ou <p> ou ce pourrait être un noeud de texte qui est créé par le système pour contenir un bloc de texte à l'intérieur d'un autre élément. Donc, en un mot, un node est n'importe quel objet DOM.

Un element est un type spécifique de node comme il existe de nombreux autres types de noeuds (noeuds de texte, noeuds de commentaire, noeuds de document, etc...).

le DOM se compose d'une hiérarchie de noeuds où chaque noeud peut avoir un parent, une liste de noeuds enfant et un nextSibling et previousSibling. Cette structure forme une hiérarchie arborescente. Le noeud document aurait sa liste de noeuds enfants (le noeud head et le noeud body ). Le noeud body aurait sa liste de les noeuds enfants (les éléments de haut niveau dans votre page HTML) et ainsi de suite.

donc, un nodeList est simplement une liste de type tableau de nodes .

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

enter image description here

vous pouvez voir un ELEMENT_NODE est un type particulier de noeud où la propriété nodeType a une valeur de 1 .

So document.getElementById("test") ne peut retourner qu'un noeud et il est garanti d'être un élément (un type spécifique de noeud). Pour cette raison, il renvoie simplement l'élément plutôt qu'une liste.

Depuis document.getElementsByClassName("para") peut retourner plus d'un objet, les concepteurs ont choisi un nodeList parce que c'est le type de données qu'ils ont créés pour une liste de plus d'un nœud. Comme ces éléments ne peuvent être que des éléments (seuls les éléments ont généralement un nom de classe), c'est techniquement un nodeList qui n'a que des noeuds d'élément de type en elle et les concepteurs auraient pu faire une différence collection nommée qui était un elementList , mais ils ont choisi d'utiliser un seul type de collection, qu'il y ait ou non seulement des éléments.


modifier: HTML5 définit un HTMLCollection qui est une liste D'éléments HTML (pas n'importe quel noeud, seulement des éléments). Un certain nombre de propriétés ou de méthodes dans HTML5 maintenant retourner un HTMLCollection . Alors qu'il est très similaire à l'interface d'un nodeList , une distinction est désormais faite en ce qu'il contient seulement des éléments, pas n'importe quel type de noeud.

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

par exemple, le bien element.children retourne un recouvrement htmlv.

339
répondu jfriend00 2016-01-13 21:47:18
la source

Node est pour la mise en œuvre d'une structure d'arbre, de sorte que ses méthodes sont pour firstChild , lastChild , childNodes , etc. C'est plus une classe pour une structure arborescente Générique.

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

Certains Node les objets sont des nœuds de texte et ils ne sont pas Element des objets. Chaque objet Node a une propriété nodeType qui indique le type de noeud qu'il est, 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__ . Devra utiliser Chrome, Firefox, ou Safari).

soit dit en passant, l'objet document est le sommet de l'arbre des noeuds, et document est un objet Document , et Document hérite de Node ainsi:

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

voici quelques docs pour les classes de noeuds et D'éléments:

https://developer.mozilla.org/en-US/docs/DOM/Node

https://developer.mozilla.org/en-US/docs/DOM/Element

38
répondu 太極者無極而生 2013-04-16 06:21:38
la source

meilleure source d'information pour tous vos malheurs 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 noeuds D'éléments sont simplement connus en tant qu'éléments."

5
répondu Matt Esch 2012-04-02 19:34:59
la source

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

l'objet de noeud représente un seul noeud dans l'arborescence des documents. Un noeud peut être un noeud d'élément, un noeud d'attribut, un noeud de texte, ou n'importe quel autre des types de noeuds expliqués dans le chapitre des types de noeuds.

Element: http://www.w3schools.com/js/js_htmldom_elements.asp

L'élément objet représente un élément d'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é par un nœud texte.

"151910920 double":

5
répondu Jerome Cance 2017-05-23 15:34:45
la source
Le noeud

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

attribut note: est un noeud qui possède des attributs à l'intérieur de celui-ci. Exp: <p id=”123”></p>

noeud de texte: noeud qui, entre l'ouverture et la fermeture de son contenu de texte contien. Exp: <p>Hello</p>

noeud D'élément: noeud qui à l'intérieur de son a d'autres étiquettes. Exp: <p><b></b></p>

chaque noeud peut être de types simultanément, Non forcément que d'un seul type.

Element est simplement un noeud d'élément.

0
répondu hecarim 2016-03-07 13:51:15
la source

Autres questions sur javascript dom html