Geschrieben von

JavaScript: Zugriff auf DOM-Elemente

Schublade

Um auf Elemente im DOM (Document Object Model) zuzugreifen gibt es grob 2 Möglichkeiten:

  • Über die Anweisung document
  • Über getElement-Methoden

Ausgangscode

Für die nachfolgenden Praxisbeispiele gehen wir von folgendem Code aus:

<html>
<head>
<title>Seitentitel</title>
</head>
<body>
<div id="div1">
<h1>Überschrift 1</h1>
<p class="absatz">Hallo und Willkommen auf der Webseite!</p>
</div>
</body>
</html>

document

Mit document können wir initial auf die gesamte Baum-Struktur zugreifen. In der Console bekommen wir dann:

Auf die jeweiligen Kinderelemente können wir dann mittels document.children zugreifen:

Wollen wir nun tiefer eintauchen, so müssen wir auf das Array mittels document.children[0] zugreifen und würden folgendes in der Console bekommen:

Um mittels dieser Methode auf den Absatz aus dem HTML-Dokument zuzugreifen müsste man dies mit document.children[0].children[1].children[0].children[1].innerText weitermachen:

Sieht kompliziert und aufwendig aus? Das ist es eigentlich auch. Gibt es alternative, effizientere Methoden? Ja, die gibt es. Hier kommen wir zu den getElement-Methoden.

getElement-Methoden

Mit den getElement-Methoden können wir auf Ids, Klassennamen und auch Tags direkt zugreifen.

getElementById

Mit getElementById kann man direkt auf Ids zugreifen. Beispiel:

getElementsByClassName

Mit getElementsByClassName kann man direkt auf Klassennamen zugreifen. Beispiel:

getElementsByTagName

Mit getElementsByTagName kann man direkt auf Tags zugreifen. Beispiel:

Last modified: 18. Juli 2019

Diese Webseite verwendet Cookies um den vollen Funktionsumfang der Webseite und damit ein besseres Online-Erlebnis bieten zu können. Es werden auch Cookies verwendet, um Zugriffe auf die Webseite zu analysieren. Außerdem gibt die Webseite Informationen zu Deiner Verwendung dieser Webseite an Partner für Analysen weiter. Technisch nicht notwendige Cookies und Tracking-Cookies werden erst aktiviert, nachdem die Einwilligung erteilt wurde.
Alle zulassen
Alle ablehnen
Cookie-Einstellungen
Diese Webseite verwendet Cookies um den vollen Funktionsumfang der Webseite und damit ein besseres Online-Erlebnis bieten zu können. Es werden auch Cookies verwendet, um Zugriffe auf die Webseite zu analysieren. Außerdem gibt die Webseite Informationen zu Deiner Verwendung dieser Webseite an Partner für Analysen weiter. Technisch nicht notwendige Cookies und Tracking-Cookies werden erst aktiviert, nachdem die Einwilligung erteilt wurde.
Alle zulassen
Alle ablehnen
Cookie-Einstellungen
Impressum
Datenschutz