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:

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 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.

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 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.

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.

Bitte unterstützen Sie dieses Projekt

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie über folgenden Link bei Amazon:
Bücher über JavaScript

Sie können uns auch eine Spende über PayPal zukommen lassen.

Vielen Dank für Ihre Unterstützung

weitere eigene Projekte: