Was ist das HTML-DOM?
Das HTML-DOM ist ein Objektmodell für HTML . Es definiert:
- HTML-Elemente als Objekte
- Eigenschaften für alle HTML-Elemente
- Methoden für alle HTML-Elemente
- Ereignisse für alle HTML-Elemente
Das HTML-DOM ist eine API (Programmierschnittstelle) für JavaScript :
- JavaScript kann HTML-Elemente hinzufügen/ändern/entfernen
- JavaScript kann HTML-Attribute hinzufügen/ändern/entfernen
- JavaScript kann CSS-Stile hinzufügen/ändern/entfernen
- JavaScript kann auf HTML-Ereignisse reagieren
- JavaScript kann HTML-Ereignisse hinzufügen/ändern/entfernen
Das HTML-DOM (Document Object Model)
Wenn eine Webseite geladen wird, erstellt der Browser ein Dokumentobjektmodell der Seite .
Das HTML-DOM -Modell ist als Baum von Objekten aufgebaut :
Der HTML-DOM-Objektbaum
HTML-Elemente finden
Wenn Sie mit JavaScript auf HTML-Elemente zugreifen möchten, müssen Sie die Elemente zuerst finden.
Dazu gibt es mehrere Möglichkeiten:
- Suchen von HTML-Elementen nach ID
- Suchen von HTML-Elementen nach Tag-Namen
- Suchen von HTML-Elementen nach Klassennamen
- Finden von HTML-Elementen durch CSS-Selektoren
- Suchen von HTML-Elementen nach HTML-Objektsammlungen
Suchen von HTML-Elementen nach ID
Der einfachste Weg, ein HTML-Element im DOM zu finden, ist die Verwendung der Element-ID.
Dieses Beispiel findet das Element mit id="intro":
Beispiel
var myElement = document.getElementById("intro");
Wenn das Element gefunden wird, gibt die Methode das Element als Objekt (in myElement) zurück.
Wenn das Element nicht gefunden wird, enthält myElement null.
Suchen von HTML-Elementen nach Tag-Namen
Dieses Beispiel findet alle <p>-Elemente:
Beispiel
var x = document.getElementsByTagName("p");
Dieses Beispiel findet das Element mit id="main" und findet dann alle <p>-Elemente innerhalb von "main":
Beispiel
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Suchen von HTML-Elementen nach Klassennamen
Wenn Sie alle HTML-Elemente mit demselben Klassennamen finden möchten, verwenden Sie getElementsByClassName().
Dieses Beispiel gibt eine Liste aller Elemente mit class="intro" zurück.
Beispiel
var x = document.getElementsByClassName("intro");
Das Suchen von Elementen anhand des Klassennamens funktioniert in Internet Explorer 8 und früheren Versionen nicht.
Finden von HTML-Elementen durch CSS-Selektoren
Wenn Sie alle HTML-Elemente finden möchten, die mit einem bestimmten CSS-Selektor (ID, Klassennamen, Typen, Attribute, Werte von Attributen usw.) übereinstimmen, verwenden Sie die Methode querySelectorAll().
Dieses Beispiel gibt eine Liste aller <p>-Elemente mit class="intro" zurück.
Beispiel
var x = document.querySelectorAll("p.intro");
Die Methode querySelectorAll() funktioniert nicht in Internet Explorer 8 und früheren Versionen.
Suchen von HTML-Elementen nach HTML-Objektsammlungen
Auf HTML-Objektsammlungen kann ebenfalls zugegriffen werden:
HTML-DOM-Tutorial
Vollständiges HTMLDOM-Tutorial
Dies war eine kurze Einführung in HTMLDOM.
Ein vollständiges HTMLDOM-Tutorial finden Sie unter W3Schools HTMLDOM-Tutorial .