Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

HTML-Baum und Zugriff über DOM darauf

Das Verständnis des DOM ist sehr wichtig. Daher wird es hier in aller Ausführlichkeit erklärt.

Über dieses Model können wir auf jedes Element einer HTML-Seite und seine Inhalte zugriefen und diese auslesen, ändern, ersetzen und auch setzen. Aber der Reihe nach. Erst das Verständnis wie der Aufbau ist.

Dazu schauen wir uns eine sehr einfach HTML-Datei an:

<html>
<head>
    <title>Seitentitel</title>
</head>
<body>
    <h1>Überschrift 1</h1>
    <a href="https://www.javascript-kurs.de/">Text des Links</a>
</body>
</html>

Diese HTML-Datei sollten wir uns als einen Baum vorstellen. Dabei schauen wir uns nur die sichtbaren Bereiche an und vereinfachen natürlich. Würden wir den Inhalt unserer Beispiel-HTML-Seite nun in einer Baumstruktur darstellen, sieht das so aus:

DOM – document object model Beispiel

Das sieht natürlich eher wie ein sehr windschiefer Baum direkt aus dem Norden aus.

Einfach einmal den Kopf nach rechts legen, dann wird die Baumstruktur besser sichtbar. Die grünen und orangen Kästchen wären die Blätter ganz oben. Gelb sind die Ästchen zu den Blättern und blau die dickeren Äste zu den kleinen Ästchen. Und in braun (gerade noch grau) ist der Stamm mit Wurzel (genannt Root-Element).

Soweit so gut – jetzt wollen wir auf die einzelnen Elemente über JavaScript zugriefen. Hierzu gibt es die Anweisung document. Geben wir document in der Konsole ein, sehen wir die Struktur.

DOM – document object model in der Konsole

Auf den Baum können wir über die Kindelemente (über children) auf jedes Element zugreifen. Über die Eingabe von document.children erhalten wir unser erstes Element – sprich das Element html.

DOM – Zugriff auf document.children

Jetzt können wir auf weitere Informationen zugriefen – dazu greifen wir über folgenden Aufbau auf das erste Element (das unter der Zahl 0 läuft) zu: document.children[0]

Zu diesem Aufbau mit den eckigen Klammern und der 0 kommen wir später im Kapitel Arrays. Technisch ist das ein Array, was zum jetzigen Verständnis noch nicht wichtig ist zu wissen. Wichtig ist nur, dass Array den ersten Inhalt unter 0 ablegen! Daher müssen wir für unseres Element auf die 0 zugreifen.

DOM – Zugriff auf erstes Element in document.children

Und jetzt können wir das Spiel weitertreiben. Wir können auf die Kinder der Kinder (children bedeutet ja nichts anderes) zugreifen. Wenn wir also bei unserem ersten Element (html) auf das nächste erste Element zugreifen, bekommen wir Zugriff auf head.

document.children[0].children[0]

DOM – Zugriff auf erstes Element im ersten Element über document.children

Greifen wir beim zweiten Element auf den zweiten Ast zu (zur Verwirrung, erster Ast hat nur Nummer 0 und der zweite Ast hat die Nummer 1) bekommen wir unseren Ast body.

DOM – gezielt Elemente abfragen über document.children

Zur Erinnerung nochmals unser farbiger DOM-Baum:

DOM Baum passend zu unserem Beispiel-HTML-Code

Schön verwirrend? Das macht auch nur bedingt Spaß, daher nutzt man normalerweise die folgenden komfortableren Möglichkeiten:

  • document.getElementById("id")
  • document.getElementsByClassName("farbe1")
  • document.getElementsByTagName("h2")

Diese Möglichkeiten schauen wir uns in den folgenden Kapiteln an.