Document Object Model (DOM): eine Einführung für Einsteiger

Was ist das DOM?

Das Document Object Model ist eine programmierbare Repräsentation eines HTML- oder XML-Dokuments in einer hierarchischen Baumstruktur. Jedes Element auf einer Webseite (sei es ein <p>-Absatz, eine <h1>-Überschrift oder ein <div>-Container) wird im DOM als ein Knoten (engl. Node) dargestellt.

Wenn ein Browser eine Webseite lädt, erstellt er aus dem HTML-Code ein DOM. Dieses Modell dient als Schnittstelle zwischen der Struktur einer Webseite (HTML), ihrem Design (CSS) und ihrer interaktiven Logik (JavaScript).

Warum ist das DOM wichtig?

Das DOM ist der Schlüssel zu dynamischen Webseiten. Es bietet zahlreiche Vorteile:

• Interaktivität: Änderungen können in Echtzeit vorgenommen werden.
• Flexibilität: Entwickler:innen können Inhalte hinzufügen, entfernen oder modifizieren.
• Zugänglichkeit: Screenreader und andere Assistenztechnologien nutzen das DOM, um Webseiten für alle Nutzer:innen zugänglich zu machen.
• Standardisierung: Das DOM ist ein Webstandard, der heute von der WHATWG als Living Standard gepflegt und in allen modernen Browsern unterstützt wird.

DOM-Baum und seine Struktur

Das DOM stellt eine Webseite als Baumstruktur dar, bei der jedes Element ein Knoten ist:

• Der Wurzelknoten: document ist die oberste Ebene, darunter folgt das Wurzelelement <html>.
• Eltern- und Kind-Knoten: HTML-Elemente können andere Elemente enthalten (z. B. ein <ul> enthält <li>-Elemente).
• Text-Knoten: Jeder sichtbare Text ist ein eigener Knoten.

Hier eine visuelle Darstellung:

document
└── html
 ├── head
 └── body
 ├── h1
 ├── p
 └── div
 └── ul
 ├── li
 └── li

DOM-Interaktion mit JavaScript

Das DOM ermöglicht JavaScript den Zugriff auf HTML-Elemente, um Inhalte zu verändern. Einige wichtige Methoden sind:

• document.getElementById("demo"): Greift auf ein Element mit einer bestimmten ID zu.
• document.getElementsByClassName("example"): Wählt Elemente anhand ihrer CSS-Klasse.
• document.querySelector("p"): Wählt das erste <p>-Element aus.

Hier ein Beispiel, wie JavaScript den Text eines Absatzes ändern kann:

document.getElementById("demo").textContent = "Neuer Text!";

DOM-Manipulation: Inhalte hinzufügen und entfernen

Mit dem DOM können Sie neue Elemente dynamisch erzeugen und der Seite hinzufügen:

Element hinzufügen

let neuesElement = document.createElement("p");
neuesElement.textContent = "Dies ist ein neues Element!";
document.body.appendChild(neuesElement);

Element entfernen

let zuEntfernendesElement = document.getElementById("demo");
zuEntfernendesElement.remove();

DOM-Events: Reaktionen auf Benutzeraktionen

Das DOM reagiert auf Nutzerinteraktionen durch Events. Ein Beispiel ist das Klicken eines Buttons:

document.getElementById("meinButton").addEventListener("click", function() {
 alert("Button wurde geklickt!");
});

DOM-Optimierung und Best Practices

DOM-Manipulationen können aufwendig sein, daher sollten einige Best Practices beachtet werden:

• Minimieren Sie DOM-Zugriffe: Jeder Zugriff auf das DOM kann Performance kosten.
• Nutzen Sie Document Fragments: Fassen Sie mehrere Änderungen zusammen, bevor Sie sie ins DOM einfügen.
• Ändern Sie Stile über CSS-Klassen: Ein Klassenwechsel bündelt mehrere Stiländerungen in einem Schritt und hält die Gestaltung im Stylesheet.