Das DOM verstehen

Das Document Object Model (DOM) ist eine der wichtigsten Schnittstellen für JavaScript im Browser. Es bildet die Brücke zwischen HTML, CSS und JavaScript und macht es möglich, Webseiten dynamisch zu verändern. In diesem Kapitel lernen Sie die Grundlagen des DOM und warum es für interaktive Webseiten unverzichtbar ist.

Was ist das DOM?

Das DOM ist eine programmierbare Darstellung Ihrer Webseite. Es repräsentiert alle Elemente einer HTML-Seite als strukturierte Objekte, die Sie mit JavaScript manipulieren können.

Stellen Sie sich das DOM wie einen Baum vor:

Der document ist die Wurzel des Baums
Jedes HTML-Element ist ein Ast oder Knoten in diesem Baum
Text und Attribute sind Blätter an diesen Ästen

Directorydocument
- Directoryhtml
  - Directoryhead
    title
    meta
  - Directorybody
    Directoryheader
    h1
    Directorymain
    p
    Directoryul
    li
    li
    li
    Directoryfooter
    nav

Der DOM-Baum

Wenn der Browser eine HTML-Seite lädt, erstellt er automatisch den DOM-Baum aus den HTML-Elementen. Jedes Element wird zu einem JavaScript-Objekt mit Eigenschaften und Methoden.

Hier ist ein einfaches HTML-Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1 id="überschrift">Willkommen</h1>
    <p>Dies ist ein <span class="highlight">wichtiger</span> Absatz.</p>
  </body>
</html>

Der entsprechende DOM-Baum dazu sieht so aus:

Directorydocument
- Directoryhtml
  - Directoryhead
    Directorytitle
    “Meine Seite” (Text)
    meta
  - Directorybody
    Directoryheader
    Directoryh1
    “Willkommen” (Text)
    Directorymain
    Directoryp
    “Dies ist ein ” (Text)
    Directoryspan.highlight
    “wichtiger” (Text)
    ” Absatz.” (Text)

Das document-Objekt

Das document-Objekt ist der Einstiegspunkt für den Zugriff auf das DOM. Es repräsentiert die gesamte Webseite und bietet viele Methoden, um auf Elemente zuzugreifen.

Einige wichtige Eigenschaften und Methoden des document-Objekts:

// Zugriff auf wichtige Teile der Seite
document.head; // Der head-Bereich der Seite
document.body; // Der body-Bereich der Seite
document.title; // Der Titel der Seite
document.URL; // Die URL der Seite

// Methoden zum Finden von Elementen (mehr dazu im nächsten Kapitel)
document.getElementById("id");
document.getElementsByClassName("klasse");
document.getElementsByTagName("tag");
document.querySelector("css-selector");
document.querySelectorAll("css-selector");

DOM-Knoten und ihre Typen

Im DOM gibt es verschiedene Arten von Knoten:

Element-Knoten: Repräsentieren HTML-Elemente (z.B. <div>, <p>, <h1>)
Text-Knoten: Enthalten den Text innerhalb eines Elements
Attribut-Knoten: Stellen Attribute von Elementen dar
Kommentar-Knoten: Repräsentieren HTML-Kommentare
Dokument-Knoten: Repräsentiert das gesamte Dokument (das document-Objekt)

Navigieren im DOM-Baum

Sie können durch den DOM-Baum navigieren, indem Sie die Beziehungen zwischen den Knoten nutzen:

Elternknoten

element.parentNode; // Der Elternknoten
element.parentElement; // Der Elternknoten (nur Elemente)

Kindknoten

element.childNodes; // Alle Kindknoten (inkl. Text, Kommentare)
element.children; // Nur Element-Kinder
element.firstChild; // Erstes Kind (kann ein Text-Knoten sein)
element.firstElementChild; // Erstes Element-Kind
element.lastChild; // Letztes Kind
element.lastElementChild; // Letztes Element-Kind

Geschwisterknoten

element.nextSibling; // Nächster Geschwisterknoten
element.nextElementSibling; // Nächstes Geschwisterelement
element.previousSibling; // Vorheriger Geschwisterknoten
element.previousElementSibling; // Vorheriges Geschwisterelement

Warum ist das DOM wichtig?

Interaktivität: Das DOM ermöglicht es, auf Benutzeraktionen zu reagieren und die Seite entsprechend anzupassen
Dynamische Inhalte: Sie können Inhalte nachladen oder ändern, ohne die Seite neu laden zu müssen
Validierung: Formulareingaben können überprüft werden, bevor sie an den Server gesendet werden
Animationen und Effekte: Visuelle Änderungen können implementiert werden
Single-Page Applications: Moderne Webanwendungen nutzen das DOM intensiv, um nahtlose Benutzererfahrungen zu bieten

Das DOM vs. HTML

Es ist wichtig zu verstehen, dass das DOM nicht dasselbe ist wie Ihr HTML-Code:

HTML ist der statische Quellcode, den Sie schreiben
DOM ist die dynamische Baumstruktur, die vom Browser erstellt wird

Der Browser korrigiert automatisch Fehler in Ihrem HTML und fügt fehlende Elemente hinzu. Ausserdem kann JavaScript das DOM nach dem Laden der Seite verändern, ohne dass sich der ursprüngliche HTML-Code ändert.

Das DOM und der Browser-Rendering-Prozess

Zum besseren Verständnis des DOM ist es hilfreich, den Rendering-Prozess im Browser zu kennen:

Der Browser lädt den HTML-Code
Der Parser verarbeitet den HTML-Code und erstellt das DOM
Der CSS-Parser erstellt das CSSOM (CSS Object Model)
DOM und CSSOM werden zum Render-Tree kombiniert
Das Layout wird berechnet (Grössen und Positionen)
Die Seite wird auf den Bildschirm gezeichnet (Painting)

Wenn JavaScript das DOM verändert, können Teile dieses Prozesses wiederholt werden, um die Änderungen anzuzeigen.

Browser-Kompatibilität

Heute ist die DOM-Unterstützung in allen modernen Browsern weitgehend standardisiert. Früher gab es erhebliche Unterschiede, weshalb Bibliotheken wie jQuery populär wurden.

Mit modernem JavaScript und aktuellen Browsern können Sie aber problemlos direkt mit dem DOM arbeiten, ohne zusätzliche Bibliotheken zu benötigen.

Einschränkungen des DOM

Das DOM kann bei sehr komplexen oder häufigen Änderungen zu Leistungsproblemen führen:

Jede DOM-Manipulation kann ein Re-Rendering auslösen
Viele kleine Änderungen können die Seite verlangsamen
Grosse DOM-Bäume verbrauchen mehr Speicher

Deshalb nutzen moderne Frameworks wie React, Vue oder Angular virtuelle DOMs oder andere Optimierungen, um effiziente Updates zu ermöglichen.

Übung: Das DOM erkunden

Öffnen Sie eine beliebige Webseite und nutzen Sie die Browser-Konsole, um das DOM zu erkunden:

Öffnen Sie eine Webseite Ihrer Wahl (z.B. Wikipedia, News-Seite)
Öffnen Sie die Browser-Entwicklungstools (F12 oder Rechtsklick > Untersuchen)
Führen Sie in der Konsole die folgenden Befehle aus und beobachten Sie die Ergebnisse:

// Informationen über das Dokument
console.log("Titel:", document.title);
console.log("URL:", document.URL);
console.log("Anzahl der Links:", document.links.length);
console.log("Anzahl der Bilder:", document.images.length);

// Navigieren im DOM-Baum
console.log("Body-Element:", document.body);
console.log("Erstes Kind des Body:", document.body.firstElementChild);
console.log(
  "Geschwister dieses Elements:",
  document.body.firstElementChild.nextElementSibling
);

// Ein Element finden und seine Eigenschaften anzeigen
let element = document.querySelector("h1"); // Sucht das erste h1-Element
if (element) {
  console.log("H1-Element gefunden:", element);
  console.log("- Inhalt:", element.textContent);
  console.log("- Elternelement:", element.parentElement);
  console.log("- Anzahl der Kind-Elemente:", element.children.length);
}

Experimentieren Sie mit eigenen Abfragen:

Versuchen Sie, andere Elemente auf der Seite zu finden
Erkunden Sie deren Eigenschaften und Beziehungen
Probieren Sie verschiedene DOM-Navigationsmethoden aus

Zusammenfassung

Das DOM (Document Object Model) ist eine Baumstruktur, die Ihre HTML-Seite als manipulierbare Objekte darstellt
Das document-Objekt ist der Einstiegspunkt für den Zugriff auf das DOM
Der DOM-Baum besteht aus verschiedenen Knotentypen wie Elementen, Text und Attributen
Sie können durch den DOM-Baum navigieren, indem Sie Beziehungen zwischen Knoten (Eltern, Kinder, Geschwister) nutzen
Das DOM ermöglicht dynamische Webseiten, da es mit JavaScript verändert werden kann
Das DOM ist nicht dasselbe wie Ihr HTML-Code, sondern eine im Browser erstellte Repräsentation

Im nächsten Kapitel werden wir lernen, wie man Elemente im DOM gezielt auswählt und bearbeitet.