Geschrieben von

JavaScript: DOM

Schublade

Definition

In meinem Artikel „Wie Webseiten geladen werden“ bin ich neben der Client-Server-Kommunikation auch auf die Darstellung der HTML-Seite im Browser eingegangen. Sobald das HTML-Dokument beim Browser angekommen ist, muss es analysiert bzw. verarbeitet werden. Dieser Vorgang wird „Parsing“ genannt und wird vom „Parser“ übernommen. „Parsing“ und „Parser“ kommen aus dem Englischen „parse“ und bedeuten, dass etwas in seine Einzelteile zerlegt wird. Hauptaufgabe des Parsers ist es, den HTML-Code in eine Objektstruktur umzuwandeln. Die Objektstruktur besteht aus verschiedenen Knoten, die miteinander verschachtelt sind. Durch diese Verschachtelung entsteht die sogenannte Baumstruktur, was letztendlich auch das Document Object Model (DOM) darstellt.

Das DOM wird im Arbeitsspeicher abgelegt und es kann nun darauf zugegriffen werden. Für alle CSS- und JavaScript-Operationen nutzt nun der Browser das DOM und arbeitet sich durch die Baumstruktur. Dies ist viel einfacher als auf Elemente eines unstrukturierten HTML-Dokuments zuzugreifen. Um dies zu verdeutlichen, kann man sich HTML-Code und DOM wie folgt selbst anschauen:

  • HTML-Code: Mit Strg+U oder mit rechter Maustaste und dann auf „Seitenquelltext anzeigen“ (am Beispiel von Chrome; Wording kann bei anderen Browsern anders sein) klicken
  • DOM: F12 oder mit rechter Maustaste und dann auf „Untersuchen“ klicken (Reiter „Elements“)

Während das HTML aus einer Code-Wüste besteht, hat man im DOM die Möglichkeit mittels der kleinen Pfeile, immer links der HTML-Tags (Knoten genannt), diese auf- und zuzuklappen. So kann man sich durch die Baumstruktur durchklicken. Würde man diese Struktur grafisch darstellen, hätte man folgendes Bild:

Aufbau

Wie man oben am Screenshot sehen kann ähnelt der Aufbau einen Baum, weshalb man beim DOM auch von einer Baumstruktur oder einem Verzeichnisbaum spricht. Dieser besteht aus einzelnen Knoten (Nodes). Die Knoten sind im Screenshot oben die einzelnen Kästen. Dabei ist jeder Knoten ein Objekt (node-Objekt), der einen Teil des Dokuments repräsentiert.

Grundsätzlich lässt sich der DOM-Aufbau über die Beziehungsarten der Knoten und der Knotentypen charakterisieren.

Beziehungsarten

  • Wurzelknoten (root): Bei einer Tabelle wäre table der Wurzelknoten.
  • Elternknoten (parent): table wäre zudem der Elternknoten von thead und tbody.
  • Kindknoten (children): Die 2 Elemente thead und tbody wären wiederum Kindknoten von table.

Knotentypen

  • Dokumentknoten: Dieser (document) stellt die komplette Baumstruktur dar.
  • Elementknoten: Dieser entspricht einem HTML-Elemente (z.B. body oder head).
  • Attributknoten: Dieser entspricht einem HTML-Attribut (z.B. das Attribut src innerhalb des img-Tags)
  • Textknoten: Dieser entspricht einem Textinhalt (z.B. die Text-Überschrift von H1)
  • Kommentare: Kommentare sind keine Textknoten, sondern stellen einen eigenen Knotentyp dar.

Zugriff auf das DOM

Es gibt nun verschiedene Methoden, um auf das DOM zuzugreifen und folgende Aufgaben durchzuführen:

  • Lesen
  • Verändern
  • Hinzufügen
  • Löschen

Dazu zählen folgende Methoden:

Dies werden wir nun nachfolgend etwas genauer anschauen. Für die Praxisbeispiele dient uns dabei folgender Ausgangscode:

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

querySelector-Methoden

Mit den querySelector-Methoden können wir auf CSS-Selektoren zugreifen.

  • querySelector(): Hier wird das erste Element zurückgegeben, welcher den angegebenen CSS-Selektor entspricht.
  • querySelectorAll(): Hier wird eine Liste von Elementen zurückgegeben, welcher den angegebenen CSS-Selektor entspricht.

Weitere Methoden

Neben den erwähnten Methoden gibt es noch weitere Anweisungen, die man beim Zugriff auf das DOM anwenden kann. Nachfolgend ein paar wichtige Methoden.

  • getAttribute(): Damit greift man auf ein Attributknoten zu.
  • firstChild: Zugriff auf den ersten Kindknoten eines Knoten.

Last modified: 10. Oktober 2019