Unterschied zwischen Node-Objekt und Element-Objekt?

Question

Ich bin völlig verwirrt zwischen Knotenpunkt Objekt und Element Objekt. document.getElementById() gibt zurück. Element Objekt während document.getElementsByClassName() gibt zurück. NodeList Objekt (Sammlung von Elementen oder Knoten?)

Wenn ein div ist ein Element Objekt dann was über div Node Objekt?

Was ist ein Node Object?

Sind Dokument-Objekt, Element-Objekt und Text-Objekt auch Node-Objekte?

In David Flanagans Buch heißt es: "Das Dokumentobjekt, seine Elementobjekte und Textobjekte sind allesamt Knotenobjekte".

Wie kommt es also, dass ein Objekt Eigenschaften/Methoden des Element-Objekts sowie des Node-Objekts erben kann?

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

 <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 ist der allgemeine Name für jede Art von Objekt in der DOM-Hierarchie. A node könnte eines der eingebauten DOM-Elemente sein, wie z. B. document o document.body Es könnte ein HTML-Tag sein, der in der HTML-Datei angegeben ist, z. B. <input> o <p> oder es könnte ein Textknoten sein, der vom System erstellt wird, um einen Textblock innerhalb eines anderen Elements aufzunehmen. Kurz gesagt, ein node ist ein beliebiges DOM-Objekt.

Eine element ist eine besondere Art von node da es viele andere Arten von Knoten gibt (Textknoten, Kommentarknoten, Dokumentenknoten, usw.).

Das DOM besteht aus einer Hierarchie von Knoten, bei der jeder Knoten einen übergeordneten Knoten, eine Liste von untergeordneten Knoten sowie einen nextSibling und previousSibling haben kann. Diese Struktur bildet eine baumartige Hierarchie. Die document Knoten hat die html Knoten als sein Kind. Die html Knoten hat seine Liste von Kindknoten (die head Knoten und der Knoten body Knoten). Die Website body Knoten hätte seine Liste von Kindknoten (die Elemente der obersten Ebene in Ihrer HTML-Seite) und so weiter.

Also, ein nodeList ist einfach eine arrayartige Liste von nodes .

Ein Element ist eine bestimmte Art von Knoten, die direkt in HTML mit einem HTML-Tag angegeben werden kann und Eigenschaften wie ein id oder eine class . können Kinder haben, usw... Es gibt noch andere Arten von Knoten, wie z.B. Kommentar-Knoten, Text-Knoten, etc... mit unterschiedlichen Eigenschaften. Jeder Knoten hat eine Eigenschaft .nodeType die den Typ des Knotens angibt. Sie können die verschiedenen Arten von Knoten hier sehen (Diagramm aus MDN ):

Sie können eine ELEMENT_NODE ist eine besondere Art von Knoten, bei der die nodeType Eigenschaft hat einen Wert von 1 .

Also document.getElementById("test") kann nur einen Knoten zurückgeben, und dieser ist garantiert ein Element (eine bestimmte Art von Knoten). Aus diesem Grund wird nur das Element und nicht eine Liste zurückgegeben.

Desde document.getElementsByClassName("para") mehr als ein Objekt zurückgeben kann, haben sich die Designer für die Rückgabe eines nodeList weil dies der Datentyp ist, der für eine Liste mit mehr als einem Knoten erstellt wurde. Da diese nur Elemente sein können (nur Elemente haben typischerweise einen Klassennamen), ist es technisch gesehen ein nodeList die nur Knoten vom Typ Element enthält, und die Designer hätten eine anders benannte Sammlung erstellen können, die eine elementList Sie entschieden sich jedoch dafür, nur eine Art von Sammlung zu verwenden, unabhängig davon, ob sie nur Elemente enthielt oder nicht.

---

EDITAR: HTML5 definiert eine HTMLCollection die eine Liste von HTML-Elementen ist (keine Knoten, nur Elemente). Eine Reihe von Eigenschaften oder Methoden in HTML5 geben jetzt eine HTMLCollection . Die Schnittstelle ähnelt zwar sehr stark der eines nodeList wird nun dadurch unterschieden, dass es nur Elemente und nicht irgendeinen Knotentyp enthält.

Die Unterscheidung zwischen einer nodeList und ein HTMLCollection hat wenig Einfluss darauf, wie man es verwendet (soweit ich das beurteilen kann), aber die Designer von HTML5 haben diese Unterscheidung jetzt gemacht.

Zum Beispiel, die element.children Eigenschaft gibt eine HTMLCollection zurück.

Answer 2

Element erbt von Node in der gleichen Weise, wie Dog erbt von Animal .

Eine Element Objekt "is-a" Node Objekt, so wie ein Dog Objekt "is-a" Animal Objekt.

Node ist für die Implementierung einer Baumstruktur gedacht, seine Methoden sind also für firstChild , lastChild , childNodes , usw. Es handelt sich eher um eine Klasse für eine generische Baumstruktur.

Und dann, einige Node Objekte sind auch Element Objekte. Element erbt von Node . Element Objekte repräsentieren tatsächlich die Objekte, wie sie in der HTML-Datei durch Tags wie <div id="content"></div> . Die Element Klasse definieren Eigenschaften und Methoden wie attributes , id , innerHTML , clientWidth , blur() et focus() .

Einige Node Objekte sind Textknoten und sie sind nicht Element Objekte. Jedes Node Objekt hat eine nodeType Eigenschaft, die angibt, um welche Art von Knoten es sich handelt, für HTML-Dokumente:

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

Einige Beispiele sind in der Konsole zu 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 Element erbt von Node . (diese Zeile funktioniert im IE nicht, weil __proto__ . Sie müssen Chrome, Firefox oder Safari verwenden).

Übrigens, die document Objekt ist die Spitze des Knotenbaums, und document est un Document Objekt, und Document erbt von Node auch:

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

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

Answer 3

Beste Informationsquelle für alle Ihre DOM-Probleme

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

Objekte, die die Funktionen Document, DocumentFragment, DocumentType implementieren, Element-, Text-, ProcessingInstruction- oder Comment-Schnittstelle (einfach Knoten genannt) nehmen an einem Baum teil.

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

Elementknoten werden einfach als Elemente bezeichnet.

Answer 4

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

Das Node-Objekt stellt einen einzelnen Knoten im Dokumentenbaum dar. Ein Knoten kann ein Elementknoten, ein Attributknoten, ein Textknoten oder einer der anderen Knotentypen sein, die im Kapitel Knotentypen erläutert werden.

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

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

vervielfältigen:

• Was ist der Unterschied zwischen einem Element und einem Knoten in XML?
• Warum sind Knoten und Elemente in XML unterschiedlich? Was war der Grund dafür?

Answer 5

Node wird zur Darstellung von Tags im Allgemeinen verwendet. Unterteilt in 3 Typen:

Attribut Hinweis: ist ein Knoten, der in seinem Inneren Attribute hat. Exp: <p id=”123”></p>

Textknoten: ist ein Knoten, der zwischen dem öffnenden und dem schließenden Knoten einen Textinhalt hat. Exp: <p>Hello</p>

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

Jeder Knoten kann gleichzeitig von einem Typ sein, nicht unbedingt nur von einem einzigen Typ.

Element ist einfach ein Elementknoten.