JavaScript- HTML-DOM-Elemente
Auf dieser Seite erfahren Sie, wie Sie HTML-Elemente auf einer HTML-Seite finden und darauf zugreifen.
HTML-Elemente finden
Häufig möchten Sie mit JavaScript HTML-Elemente manipulieren.
Dazu 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
const element = document.getElementById("intro");
Wenn das Element gefunden wird, gibt die Methode das Element als Objekt (in element) zurück.
Wenn das Element nicht gefunden wird, enthält element null.
Suchen von HTML-Elementen nach Tag-Namen
Dieses Beispiel findet alle <p>Elemente:
Beispiel
const element = document.getElementsByTagName("p");
Dieses Beispiel findet das Element mit id="main"und findet dann alle <p>Elemente darin "main":
Beispiel
const x = document.getElementById("main");
const 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 zurück class="intro".
Beispiel
const x = document.getElementsByClassName("intro");
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 querySelectorAll()Methode.
Dieses Beispiel gibt eine Liste aller <p>Elemente mit zurück class="intro".
Beispiel
const x = document.querySelectorAll("p.intro");
Suchen von HTML-Elementen nach HTML-Objektsammlungen
Dieses Beispiel findet das Formularelement mit id="frm1"in der Formularsammlung und zeigt alle Elementwerte an:
Beispiel
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Auf die folgenden HTML-Objekte (und Objektsammlungen) kann ebenfalls zugegriffen werden: