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
Vue nutzt Amap zur Realisierung der Stadtpositionierung
In diesem Artikel wird der spezifische Code von V...
Vue: Detaillierte Erklärung von Speicherlecks
Was ist ein Speicherleck? Ein Speicherleck bedeut...
Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen
Inhaltsverzeichnis vite Bauen Konfiguration vite....
Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios
Inhaltsverzeichnis Vorwort Kern - CancelToken Pra...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
Beschreibung der Grenzen und Bereiche zwischen MySQL
MySQL zwischen Grenzbereich Der Bereich zwischen ...
Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm
Wie wir alle wissen, haben die Webseiten, Websites...
Eine kurze Analyse von Linux resolv.conf
1. Einleitung resolv.conf ist die Konfigurationsd...
Absatzlayout und Zeilenumbrüche in HTML-Webseiten
Das Erscheinungsbild einer Webseite hängt maßgebl...
Super einfache QPS-Statistikmethode (empfohlen)
Statistik der QPS-Werte der letzten N Sekunden (i...
Zusammenfassung der sieben MySQL JOIN-Typen
Bevor wir beginnen, erstellen wir zwei Tabellen, ...
Das Implementierungsprinzip der MySQL-Master-Slave-Synchronisation
1. Was ist MySQL Master-Slave-Synchronisierung? W...
Implementierung eines einfachen Karussells auf Basis von JavaScript
In diesem Artikel wird der spezifische JavaScript...
So mounten Sie eine Datenfestplatte auf Tencent Cloud Server Centos
Überprüfen Sie zunächst, ob das Festplattengerät ...
Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen
Inhaltsverzeichnis MySQL Inner Join, Left Join, R...