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]
5 réponses
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 ):
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.
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
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."
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":
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.