Vorwort
Die Funktion von DOM besteht darin, die Webseite in ein JavaScript -Objekt umzuwandeln, damit Sie JavaScript verwenden können, um verschiedene Operationen auf der Webseite auszuführen (z. B. Hinzufügen und Löschen von Inhalten). Der Browser analysiert das HTML -Dokument in eine Reihe von Knoten basierend auf dem DOM -Modell und bildet dann eine Baumstruktur dieser Knoten. Die kleinste Zusammensetzungseinheit von DOM wird als Knoten bezeichnet, und die Baumstruktur eines Dokuments (DOM -Baum) besteht aus 12 Arten von Knoten.
Eigentum
Im Allgemeinen haben Knoten mindestens drei grundlegende Eigenschaften: Nodetyp , NodeName und NodeValue .
Unterschiedliche Knotentypen, die Werte dieser drei Attribute sind ebenfalls unterschiedlich.
Nodetyp
Die Nodetype -Eigenschaft gibt einen konstanten Wert des Knotentyps zurück. Unterschiedliche Typen entsprechen unterschiedlichen konstanten Werten, und 12 Typen entsprechen konstante Werte von 1 bis 12.
Elementknotenknoten.element_node (1)
Attributknotenknoten.attribute_node (2)
Textknotenknoten.Text_node (3)
CDATA -Knotenknoten.cdata_section_node (4)
Entitätsreferenzname Knotenknoten.enterry_Reference_Node (5)
Entitätsname Node Node.entity_node (6)
Prozessanweisungsknotenknoten.processing_instruction_node (7)
Kommentar node node.comment_node (8)
Dokumentknotenknoten.document_node (9)
Dokumenttypknotenknoten.document_type_node (10)
Dokumentfragmentknotenknoten.dokument_fragment_node (11)
DTD -Deklaration Knotenknoten.notation_node (12)
DOM definiert eine Knotenschnittstelle, die als Knotentyp in JavaScript implementiert wird, und alle DOM-Objekte in IE8-Browser werden als COM-Objekte implementiert. Daher unterstützt IE8-Browser das Schreiben von Knotenobjekten nicht
// 1 in Standardbrowser zurückgeben, und in IE8-Browser wird ein Fehler angegeben, der den Knoten dieser Konsole.log (node.element_node); // 1 veranlasst
Knotenname
Die Eigenschaft von KnodeName gibt den Namen des Knotens zurück
NodeValue
Die NodeValue -Eigenschaft gibt den Wert des aktuellen Knotens im Format als Zeichenfolge zurück oder legt sie fest
Als nächstes erfolgt eine detaillierte Beschreibung von 1 bis 12 gemäß der entsprechenden Reihenfolge des konstanten Wertes des Knotentyps.
【1】 Elementknoten
Das Elementknotenelement entspricht dem HTML -Tagelement der Webseite. Der Node -Typ -Nodetyp -Wert des Elementknotens ist 1, der Knotenname NodeName -Wert ist der Großbuchstaben und der NodeValue -Wert null
Nehmen Sie das Körperelement als Beispiel
// 1 'Body' nullconsole.log (document.body.nodetype, document.body.nodename, document.body.nodeValue) console.log (node.element_node === 1); // true
【2】 Feature -Knoten
Das Attribut des Elementattributs entspricht den Attributen des HTML -Tags auf der Webseite. Es existiert nur in den Attributenattributen des Elements und ist nicht Teil des Dom -Dokumentbaums. Der Node -Typ -Nodetyp -Wert des charakteristischen Knotens ist 2, der Knotenname Knoehename -Wert ist der Attributname und der NodeValue -Wert ist der Attributwert
Jetzt hat das DIV -Element das Attribut von id = "test"
<div id = "test"> </div> <script> var attr = test.attributes.id; // 2 'id' 'test'console.log (attr.nodetype, attr.nodename, attr.nodeValue) console.log (node.attribute_node === 2); // true </script>;
【3】 Textknoten
Der Textknotentext repräsentiert den HTML -Tag -Inhalt auf der Webseite. Der Node -Typ -Nodetyp -Wert des Textknotens ist 3, der Knotenname NodeName -Wert lautet '#Text' und der NodeValue -Wert ist der Beschriftungsinhaltswert
Jetzt ist der Inhalt des DIV -Elements "Test"
<div id = "test"> test </div> <script> var txt = test.firstchild; // 3 '#text' 'test' console.log (txt.nodetype, txt.nodename, txt.nodeValue) console
【4】 CDATA -Knoten
Der CDatasiction-Typ gilt nur für XML-basierte Dokumente und wird nur in XML-Dokumenten angezeigt. Es repräsentiert den CDATA -Bereich und das Format ist im Allgemeinen
<! [Cdata []]>
Der Wert des Knotentyp-Nodetyps dieses Typknotens beträgt 4, der Wert des Knotennamens NodeName ist '#CDATA-Abschnitt', und der Wert von NodeValue ist der Inhalt im CDATA-Bereich
【5】 Entität Referenzname Knoten
Eine Entität ist eine Erklärung, die den in XML verwendeten Namen anstelle von Inhalten oder Tags angibt. Eine Entität enthält zwei Teile. Zunächst muss der Name unter Verwendung der Entitätserklärung an den Ersatzinhalt gebunden sein. Entitätserklärungen werden in einer Dokumenttyp -Definition (DTD) oder XML -Schema erstellt, die den Namen <! Entitätsname "Wert"> Syntax. Zweitens werden Namen in Entitätserklärungen in XML verwendet. Bei Verwendung in XML wird dieser Name als Entitätsreferenz bezeichnet.
Der Knoten -Typ -Nodetyp des Entitätsreferenznamens Node Eintrags_Reference ist 5, der Knotenname NodeName ist der Name der Entitätsreferenz, und der NodeValue ist null
// Entitätsname <! Entity Publisher "Microsoft Press"> // Entitätsname Referenz <Pubinfo> veröffentlicht von & Publisher; </pubinfo>
【6】 Entitätsname Knoten
Es wurde oben ausführlich erklärt, damit ich es nicht wiederholen werde
Der Knotentyp -Nodetyp dieses Knoten
【7】 Verarbeitungsanweisungsknoten
Der Knoten -Typ -Nodetyp, der die Befehlsknoten -Recrecessinstruction übernimmt, hat einen Wert von 7
【8】 Annotationsknoten
Kommentarknotenkommentar gibt HTML -Kommentare auf der Webseite dar. Der Wert des Knotentyp -Nodetyps des kommentierten Knotens beträgt 8, der Wert des Knotennamens KnodeName ist '#Coment', und der Wert von NodeValue ist der Inhalt des Kommentars
Jetzt gibt es einen <!-Ich bin Kommentarinhalt-> im Divelelement mit ID ID mydiv
<div id = "mydiv"> <!-Ich bin der Kommentarinhalt-> </div> <script> var com = mydiv.firstchild; // 8 '#comment' 'Ich bin der Kommentarinhalte inhalts.
【9】 Dokumentknoten
Das Dokumentknotendokument stellt ein HTML -Dokument dar, das auch als Stammknoten bezeichnet wird und auf das Dokumentobjekt zeigt. Der Knotentyp -Nodetyp des Dokumentknotens ist 9, der Knotenname NodeName lautet '#document' und der NodeValue ist NULL
<Script> // 9 "#document" nullconsole.log (document.nodetype, document.nodename, document.nodeValue) console.log (node.document_node === 9); // true </script>
【10】 Dokumenttypknoten
DocumentType -Knoten documentType enthält alle Informationen zum DocType des Dokuments. Der Knotentyp -Nodetyp -Wert des Knotens des Dokumenttyps beträgt 10, der Knotenname KnodeName -Wert ist der Name des DocType, und der NodeValue -Wert ist null
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> </head> <body> <script> var nodecumentType = document.firstchild; // 10 "html" nullconsole.log (nodeDocumentType.nodetype, nodeDocumentType.nodename, nodeDocumentType.nodeValue); console.log (node.document_type_node === 10); </script> </body> </html>
【11】 Dokumentfragmentknoten
Dokumentfragmentknoten Dokumentfragment enthält keine entsprechenden Tags im Dokument. Es handelt sich um ein leichtes Dokument, das Knoten enthalten und steuern kann, aber nicht zusätzliche Ressourcen wie ein vollständiges Dokument überwindet. Der Knotentyp-Nodetyp dieses Knoten
<Script> var nodecumentFragment = document.CreateCumentFragment (); // 11 "#document-Fragment" nullconsole.log (nodeDocumentFragment.nodetype, nodeDocumentFragment.nodename, nodecumentFragment.nodeValue); console.log (node.document_fragment_node === 11); // true </script>
【12】 DTD -Deklarationsknoten
Die DTD -Deklarationsknotennotation repräsentiert das in DTD deklarierte Symbol. Der Knotentyp -Nodetyp dieses Knoten
Zusammenfassen
Unter diesen 12 DOM -Knoten -Typen sind einige für XML -Dokumente geeignet, und einige werden häufig nicht verwendet. Was häufig verwendete Typen betrifft, werden wir sie später ausführlich vorstellen. Dieser Artikel bietet nur einen Überblick über diese 12 Knotentypen. Ich hoffe, dieser Artikel wird für alle hilfreich sein.