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 zugreifen und diese auslesen, ändern, ersetzen und auch setzen. Aber der Reihe nach. Erst den Aufbau verstehen.
Dazu schauen wir uns eine sehr einfache 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:
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 braun (gerade noch grau) ist der Stamm mit Wurzel (genannt Root-Element).
So weit, so gut – jetzt wollen wir auf die einzelnen Elemente über JavaScript zugreifen. Hierzu gibt es die Anweisung document. Geben wir document in der Konsole ein, sehen wir die Struktur.
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.
Jetzt können wir auf weitere Informationen zugreifen – 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 Arrays den ersten Inhalt unter 0 ablegen! Daher müssen wir für unser Element auf die 0 zugreifen.
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]
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.
Zur Erinnerung nochmals unser farbiger DOM-Baum:
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.