Einführung in HTML DOM_PowerNode Java Academy
|
Was ist DOM? Mit JavaScript können Sie das gesamte HTML-Dokument rekonstruieren. Sie können Elemente auf der Seite hinzufügen, entfernen, ändern oder neu anordnen. Um etwas auf der Seite zu ändern, benötigt JavaScript Zugriff auf alle Elemente im HTML-Dokument. Dieser Zugriff sowie Methoden und Eigenschaften zum Hinzufügen, Verschieben, Ändern oder Entfernen von HTML-Elementen werden über das Document Object Model (DOM) bereitgestellt. Im Jahr 1998 veröffentlichte das W3C die erste Ebene der DOM-Spezifikation. Diese Spezifikation ermöglicht den Zugriff auf jedes einzelne Element einer HTML-Seite und dessen Bearbeitung. Alle Browser implementieren diesen Standard, sodass DOM-Kompatibilitätsprobleme nahezu nicht auftreten. Das DOM kann von JavaScript zum Lesen und Ändern von HTML-, XHTML- und XML-Dokumenten verwendet werden. Das DOM ist in verschiedene Teile (Core, XML und HTML) und Ebenen (DOM Level 1/2/3) unterteilt: Kern-DOM Definiert einen Standardsatz von Objekten für jedes strukturierte Dokument XML DOM Definiert eine Reihe von Standardobjekten für XML-Dokumente HTML DOM Definiert einen Standardsatz von Objekten für HTML-Dokumente. Knoten Laut DOM ist jede Komponente in einem HTML-Dokument ein Knoten. Das DOM gibt an:
Knotenhierarchie Knoten haben eine hierarchische Beziehung zueinander. Alle Knoten in einem HTML-Dokument bilden einen Dokumentbaum (oder Knotenbaum). Jedes Element, Attribut, jeder Text usw. in einem HTML-Dokument stellt einen Knoten im Baum dar. Der Baum beginnt beim Dokumentknoten und verzweigt sich von dort aus weiter, bis er alle Textknoten auf der untersten Ebene des Baums erreicht. Das folgende Bild zeigt einen Dokumentbaum (Knotenbaum):
Dokumentbaum (Anzahl der Knoten) Betrachten Sie das folgende HTML-Dokument:
<html>
<Kopf>
<title>DOM-Anleitung</title>
</Kopf>
<Text>
<h1>DOM-Lektion Eins</h1>
<p>Hallo Welt!</p>
</body>
</html>Alle oben genannten Knoten stehen in Beziehung zueinander. Jeder Knoten außer dem Dokumentknoten hat einen übergeordneten Knoten. Beispielsweise ist der übergeordnete Knoten von <head> und <body> der Knoten <html> und der übergeordnete Knoten des Textknotens „Hallo Welt!“ ist der Knoten <p>. Die meisten Elementknoten haben untergeordnete Knoten. Beispielsweise hat der Knoten <head> ein untergeordnetes Element: den Knoten <title>. Der Knoten <title> hat auch ein untergeordnetes Element: den Textknoten „DOM Tutorial“. Wenn Knoten denselben übergeordneten Knoten gemeinsam nutzen, sind sie Geschwister (Geschwisterknoten). Beispielsweise sind <h1> und <p> Geschwister, da ihr übergeordneter Knoten der <body>-Knoten ist. Knoten können auch Nachkommen haben. Dabei handelt es sich um alle untergeordneten Knoten eines Knotens oder die untergeordneten Knoten dieser untergeordneten Knoten usw. Beispielsweise sind alle Textknoten Nachkommen des Knotens <html> und der erste Textknoten ist ein Nachkomme des Knotens <head>. Knoten können auch Vorgänger haben. Ein Vorgänger ist der übergeordnete Knoten eines Knotens oder der übergeordnete Knoten seines Vorgängers usw. Beispielsweise können alle Textknoten den Knoten <html> als Vorgänger haben. |
<<: Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden
>>: Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung
Artikel empfehlen
Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit
Dies liegt daran, dass der Datenbankserver so ein...
CSS Flex mehrere mehrspaltige Layouts
Grundlegendes dreispaltiges Layout .Container{ An...
Zusammenfassung der Betriebsaufzeichnungen zum Ändern der MyISAM-Speicher-Engine in Innodb in MySQL
Im Allgemeinen bietet MySQL standardmäßig eine Vi...
Zusammenfassung zur Verwendung von HTML-Meta-Tags (empfohlen)
Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...
Detaillierte Erklärung der Prinzipien des responsiven Systems von Vue
Inhaltsverzeichnis Die Grundprinzipien des respon...
Fallstudie zu JavaScript Anti-Shake
Prinzip Das Prinzip von Anti-Shake ist: Du kannst...
So stellen Sie Redis schnell als Docker-Container bereit
Inhaltsverzeichnis Erste Schritte Datenspeicherun...
So verwenden Sie den JS-Code-Compiler Monaco
Vorwort Meine Anforderungen sind Syntaxhervorhebu...
MySQL berechnet die Anzahl der Tage, Monate und Jahre zwischen zwei Daten
Die in MySQL integrierte Datumsfunktion TIMESTAMP...
Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript
Inhaltsverzeichnis 1. Was ist der Ausführungskont...
Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript
Inhaltsverzeichnis Vorwort Das Prinzip der asynch...
Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen
1.Schreiben Sie davor: Als leichtgewichtige Virtu...
Lernhinweise zum WeChat-Applet: Seitenkonfiguration und -routing
Ich habe kürzlich die Entwicklung kleiner Program...
Verwenden von Front-End-HTML+CSS+JS zum Entwickeln einer einfachen TODOLIST-Funktion (Notizblock)
Inhaltsverzeichnis 1. Kurze Einführung 2. Screens...
Zusammenfassung der Methoden zur Änderung von MySQL-Passwörtern
Methoden zum Ändern von Passwörtern vor MySQL 5.7...