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
Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt
Inhaltsverzeichnis 1.Linux-Anmeldeschnittstelle 2...
HTML realisiert Echtzeit-Überwachungsfunktion der Hikvision-Kamera
Das Unternehmen hat vor Kurzem einige CCFA-Aktivi...
So ändern Sie den Hostnamen in Linux
1. Den aktuellen Hostnamen anzeigen [root@fangjia...
Eine kurze Diskussion darüber, wie man Div und Tabelle auswählt und kombiniert
Das Seitenlayout war mir schon immer ein Anliegen...
CSS-Syntax für Tabellenränder
<br /> CSS-Syntax für Tabellenränder Zu den ...
So implementieren Sie Eingabe-Checkboxen zur Erweiterung der Klickreichweite
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
So installieren und konfigurieren Sie WSL unter Windows
Was ist WSL Zitat aus der Baidu-Enzyklopädie: Das...
Detaillierte Erläuterung des Prozesses der Zabbix-Überwachung von SQLServer
Werfen wir einen Blick auf die Zabbix-Überwachung...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...
Bedingtes Rendering von Vue (v-if und v-show)
Inhaltsverzeichnis 1. v-wenn 2. Verwenden Sie v-i...
Grafisches Tutorial zur Installation der MySQL 8.0.13-Dekomprimierungsversion unter Windows
In diesem Artikel finden Sie das grafische Tutori...
So schreiben Sie Objekte und Parameter, um Flash in Firefox abzuspielen
Code kopieren Der Code lautet wie folgt: <Obje...
Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen
Sie können die Trigger-Methode verwenden. In JavaS...
Eine kurze Analyse der CSS-Selektorgruppierung
Selektorgruppierung Angenommen, Sie möchten, dass...
Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann
Verwenden Sie den folgenden Befehl, um einen Cont...