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
JavaScript zum Erzielen eines Zeitbereichseffekts
In diesem Artikel wird der spezifische Code für J...
Detailliertes Beispiel für die Verwendung von MySQL-Triggern
Details zur MySQL-Triggersyntax: Ein Trigger ist ...
Eine kurze Analyse der Unterschiede und Funktionen zwischen Übergang, Transformation und Übersetzung in CSS3
transformieren und übersetzen Transformieren bezi...
Lösen Sie das Problem, dass die virtuelle CentOS7-Maschine nicht auf das Internet zugreifen kann, und richten Sie die virtuelle CentOS7-Maschine so ein, dass sie für den Zugriff auf das Internet eine statische IP verwendet
Ich habe vor Kurzem in einer virtuellen VMware-Ma...
Eine einfache Möglichkeit, alle Funktionen des Einkaufswagens in Vue zu implementieren
Die Hauptfunktionen sind wie folgt: Produktinform...
Einführung in die Verschachtelungsregeln von HTML-Tags
Es gibt viele XHTML-Tags: div, ul, li, dl, dt, dd...
503 Dienst nicht verfügbar Fehlerlösungserklärung
1. Beim Öffnen der Webseite wird die Meldung „503...
Eine "klassische" Falle der MySQL UPDATE-Anweisung
Inhaltsverzeichnis 1. Problematische SQL-Anweisun...
Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML
Ich bin in letzter Zeit auf viele Zentrierungspro...
Frage zu benutzerdefinierten Attributen von HTML-Tags
In der vorherigen Entwicklung haben wir die Stand...
So ermitteln Sie die Größe eines Linux-Systemverzeichnisses mit dem Befehl du
Jeder, der das Linux-System verwendet hat, sollte...
Lösung für das Problem einer großen Anzahl von php-cgi.exe-Prozessen auf dem Server, die dazu führen, dass die CPU 100 % belegt
Optimieren Sie die FastCGI-Konfigurationsdatei fc...
Inaktive Benutzer nach einem Login-Timeout in Linux automatisch abmelden
Methode 1: Ändern Sie die Datei .bashrc oder .bas...
Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern
1. Berechnete Eigenschaften und Listener 1.1 Bere...
JS asynchroner Code Unit-Test Magie Promise
Inhaltsverzeichnis Vorwort Verkettung von Verspre...