Unterschied zwischen Knotenobjekt und Elementobjekt?

Ich bin total verwirrt zwischen Knotenobjekt und Elementobjekt. Gibt das document.getElementById()Element-Objekt zurück, während document.getElementsByClassName()das NodeList-Objekt zurückgegeben wird (Sammlung von Elementen oder Knoten?)

Wenn ein div ein Elementobjekt ist, was ist dann mit dem div-Knotenobjekt?

Was ist ein Knotenobjekt?

Sind Dokumentobjekt, Elementobjekt und Textobjekt auch Knotenobjekt?

Gemäß David Flanagans Buch "Das Dokumentobjekt, seine Elementobjekte und Textobjekte sind alle Knotenobjekte".

Wie kommt es, dass ein Objekt sowohl Eigenschaften / Methoden des Elementobjekts als auch des Knotenobjekts erben kann?

Wenn ja, sind Knotenklasse und Elementklasse im prototypischen Vererbungsbaum verwandt.

 <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 nodeist der generische Name für einen beliebigen Objekttyp in der DOM-Hierarchie. A nodekann eines der integrierten DOM-Elemente wie documentoder sein document.body, es kann ein im HTML angegebenes HTML-Tag sein wie <input>oder <p>oder es kann ein Textknoten sein, der vom System erstellt wird, um einen Textblock in einem anderen Element zu halten . Kurz gesagt, a nodeist ein beliebiges DOM-Objekt.

An elementist ein bestimmter Typ, nodeda es viele andere Knotentypen gibt (Textknoten, Kommentarknoten, Dokumentknoten usw.).

Das DOM besteht aus einer Hierarchie von Knoten, wobei jeder Knoten einen übergeordneten Knoten, eine Liste von untergeordneten Knoten sowie einen nextSibling und einen previousSibling haben kann. Diese Struktur bildet eine baumartige Hierarchie. Der documentKnoten würde eine Liste von untergeordneten Knoten haben (der headKnoten und der bodyKnoten). Der bodyKnoten verfügt über eine Liste der untergeordneten Knoten (die Elemente der obersten Ebene in Ihrer HTML-Seite) usw.

A nodeListist also einfach eine Array-ähnliche Liste von nodes.

Ein Element ist ein bestimmter Knotentyp, der direkt im HTML mit einem HTML-Tag angegeben werden kann und Eigenschaften wie ein idoder ein haben kann class. kann untergeordnete Elemente usw. haben. Es gibt andere Knotentypen wie Kommentarknoten, Textknoten usw. mit unterschiedlichen Merkmalen. Jeder Knoten verfügt über eine Eigenschaft, .nodeTypedie angibt, um welchen Knotentyp es sich handelt. Sie können die verschiedenen Knotentypen hier sehen (Diagramm von MDN ):

Sie können sehen, dass ELEMENT_NODEes sich um einen bestimmten Knotentyp handelt, für den die nodeTypeEigenschaft den Wert hat 1.

Es document.getElementById("test")kann also nur ein Knoten zurückgegeben werden, und es handelt sich garantiert um ein Element (einen bestimmten Knotentyp). Aus diesem Grund wird nur das Element und keine Liste zurückgegeben.

Da document.getElementsByClassName("para")mehr als ein Objekt zurückgegeben werden kann, haben sich die Designer für die Rückgabe von a entschieden, nodeListda dies der Datentyp ist, den sie für eine Liste mit mehr als einem Knoten erstellt haben. Da dies nur Elemente sein können (normalerweise haben nur Elemente einen Klassennamen), enthält es technisch gesehen nodeListnur Knoten mit Typelementen, und die Designer hätten eine Sammlung mit einem anderen Namen erstellen können, die eine war elementList, aber sie haben sich dafür entschieden, nur einen Typ zu verwenden der Sammlung, ob es nur Elemente enthielt oder nicht.

BEARBEITEN: HTML5 definiert HTMLCollectioneine Liste von HTML-Elementen (kein Knoten, nur Elemente). Eine Reihe von Eigenschaften oder Methoden in HTML5 geben jetzt eine zurück HTMLCollection. Während es in der Schnittstelle zu a sehr ähnlich nodeListist, wird jetzt unterschieden, dass es nur Elemente enthält, keinen Knotentyp.

Die Unterscheidung zwischen a nodeListund an HTMLCollectionhat wenig Einfluss darauf, wie Sie eine verwenden (soweit ich das beurteilen kann), aber die Designer von HTML5 haben diese Unterscheidung jetzt getroffen.

Beispielsweise gibt die element.childrenEigenschaft eine Live-HTMLCollection zurück.

Nodeist für eine Baumstruktur der Umsetzung, so seine Methoden sind für firstChild, lastChild, childNodesusw. Es ist mehr eine Klasse für eine generische Baumstruktur ist.

Und dann sind einige NodeObjekte auch ElementObjekte. Elementerbt von Node. ElementObjekte repräsentiert tatsächlich die Objekte, wie sie in der HTML-Datei durch die Tags wie angegeben sind <div id="content"></div>. Die ElementKlasse definiert Eigenschaften und Methoden , wie zum Beispiel attributes, id, innerHTML, clientWidth, blur(), und focus().

Einige NodeObjekte sind Textknoten und keine ElementObjekte. Jedes NodeObjekt verfügt über eine nodeTypeEigenschaft, die angibt, um welchen Knotentyp es sich bei HTML-Dokumenten handelt:

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

Wir können einige Beispiele in der Konsole sehen:

> 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

Die letzte Zeile oben zeigt, dass von Elementerbt Node. (Diese Zeile funktioniert im IE aufgrund von nicht __proto__. Sie muss Chrome, Firefox oder Safari verwenden.)

Übrigens ist das documentObjekt die Spitze des Knotenbaums und documentein DocumentObjekt und Documenterbt auch von Node:

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

Hier sind einige Dokumente für die Node- und Element-Klassen:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Beste Informationsquelle für alle Ihre DOM-Probleme

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

"Objekte, die die Schnittstelle Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction oder Comment (einfach als Knoten bezeichnet) implementieren, nehmen an einem Baum teil."

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

"Elementknoten werden einfach als Elemente bezeichnet."

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

Das Knotenobjekt repräsentiert einen einzelnen Knoten in der Dokumentstruktur. Ein Knoten kann ein Elementknoten, ein Attributknoten, ein Textknoten oder ein anderer der im Kapitel Knotentypen erläuterten Knotentypen sein.

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

Das Element-Objekt repräsentiert ein Element in einem XML-Dokument. Elemente können Attribute, andere Elemente oder Text enthalten. Wenn ein Element Text enthält, wird der Text in einem Textknoten dargestellt.

Duplikat:

• Was ist der Unterschied zwischen einem Element und einem Knoten in XML?
• Warum unterscheiden sich Knoten und Elemente in XML? Was war die Begründung?

Der Knoten wird verwendet, um Tags im Allgemeinen darzustellen. In 3 Typen unterteilt:

Attribut Hinweis: ist ein Knoten, der Attribute enthält. Exp:<p id=”123”></p>

Textknoten: ist ein Knoten, der zwischen dem Öffnen und Schließen einen Contian-Textinhalt hat. Exp:<p>Hello</p>

Elementknoten: ist ein Knoten, der in seinem Inneren andere Tags hat. Exp:<p><b></b></p>

Jeder Knoten kann gleichzeitig ein Typ sein, nicht unbedingt nur ein einzelner Typ.

Element ist einfach ein Elementknoten.