Was ist der DOM?

Wenn der Browser eine HTML-Datei lädt, liest er den Code nicht einfach von oben nach unten und vergisst ihn. Er baut daraus eine Struktur im Arbeitsspeicher — eine Art Baum, in dem jedes HTML-Tag ein Knoten ist. Dieser Baum heißt Document Object Model, kurz DOM. Das ist die Wurzel, darunter hängen und , darunter wiederum

,
, und so weiter. Jedes Element hat einen Platz in dieser Hierarchie.

Der DOM ist die Brücke zwischen statischem HTML und dynamischer Website. HTML beschreibt deine Seite einmalig, beim ersten Laden. Der DOM ist die lebende Version davon, die du mit JavaScript anfassen und verändern kannst — während der Besucher gerade auf der Seite ist, ohne dass etwas neu geladen werden muss.

Vergleich aus dem Alltag: HTML ist der Bauplan eines Hauses auf Papier. Der DOM ist das fertig gebaute Haus, in dem du jederzeit eine Wand verschieben, ein Fenster austauschen oder einen neuen Raum anbauen kannst. Der Bauplan bleibt der gleiche, aber das Haus verändert sich live.

Wie der DOM-Baum aussieht

Stell dir folgenden HTML-Schnipsel vor:

<body>
  <header>
    <h1>Willkommen</h1>
  </header>
  <main>
    <p>Das ist ein Absatz.</p>
    <a href="/kontakt">Kontakt</a>
  </main>
</body>

Der DOM dazu sieht so aus:

body
├── header
│   └── h1
│       └── "Willkommen"
└── main
    ├── p
    │   └── "Das ist ein Absatz."
    └── a (href="/kontakt")
        └── "Kontakt"

Jedes Element ist ein Knoten. Texte sind ebenfalls Knoten — sogenannte Textnodes. Attribute wie href="/kontakt" hängen am jeweiligen Element. Über JavaScript kannst du jeden dieser Knoten gezielt ansprechen, sein Inhalt ändern oder ihn komplett aus dem Baum entfernen.

Wie JavaScript auf den DOM zugreift

JavaScript hat mehrere eingebaute Methoden, um mit dem DOM zu sprechen. Die wichtigste ist document, das globale Objekt, das den ganzen Baum repräsentiert:

// Element nach ID holen
const ueberschrift = document.getElementById("titel");

// Element nach Klasse holen (alle, die passen)
const buttons = document.querySelectorAll(".cta-button");

// Element verändern
ueberschrift.textContent = "Neuer Titel";
ueberschrift.style.color = "#00C896";

// Neues Element erzeugen und einfügen
const neuerAbsatz = document.createElement("p");
neuerAbsatz.textContent = "Hallo, ich bin neu hier.";
document.body.appendChild(neuerAbsatz);

// Element entfernen
ueberschrift.remove();

In sechs Zeilen: Du holst ein Element, änderst seinen Text und seine Farbe, baust ein komplett neues Element, hängst es ans Ende des Body und löschst die Überschrift. Das ist die Grundlage von allem, was sich auf einer modernen Website tut — vom Klapp-Menü bis zum Live-Filter im Shop.

Event Bubbling — wie Klicks durch den Baum wandern

Wenn ein Nutzer auf einen Button klickt, passiert im DOM mehr als nur "Button registriert Klick". Das Event wandert vom geklickten Element nach oben durch den ganzen Baum — vom Button über das umgebende

, weiter zum

, bis zum . Dieses Durchreichen heißt Event Bubbling.

Warum ist das nützlich? Du kannst einen einzigen Event-Listener auf einen Eltern-Container setzen und trotzdem alle Klicks auf seine Kinder abfangen. Statt hundert Listener auf hundert Produktkarten zu hängen, registrierst du einen einzigen auf der Gitter-Wrapper — und prüfst innerhalb des Handlers, welches Kind-Element genau getroffen wurde. Das heißt "Event Delegation" und ist der Standard-Trick, um Seiten mit vielen interaktiven Elementen performant zu halten. Gerade bei dynamisch nachgeladenen Inhalten ist das Gold wert, weil neue Elemente automatisch mitbedient werden, ohne dass du für sie einzelne Listener aufsetzen musst.

Warum ist der DOM für deine Website wichtig?

Der DOM ist der Grund, warum eine Website nicht nur ein statisches Dokument ist, sondern eine Anwendung. Ohne DOM könnte JavaScript nichts verändern. Cookie-Banner, Live-Suche, Bilderkarussells, dynamische Formulare, Lazy Loading — alles passiert, weil JavaScript den DOM in Echtzeit umbaut.

Beispiel aus dem Alltag: Eine Möbelhaus-Website hat einen Filter "nur Sofas unter 1000 Euro anzeigen". Der Besucher klickt, und sofort verschwinden alle teureren Sofas aus der Liste. Was technisch passiert: JavaScript geht durch den DOM, findet jeden Sofa-Knoten, prüft das Preis-Attribut und entfernt die Knoten, die nicht passen. Kein Reload, keine neue Seite, keine Wartezeit.

Aber: Je größer und tiefer der DOM, desto langsamer wird der Browser. Eine Seite mit 5000 verschachtelten

s hat einen riesigen DOM und kostet messbar Core Web Vitals. Sauberes, flaches HTML hält den DOM klein und die Seite schnell.

Häufige Missverständnisse rund um den DOM

DOM ist nicht dasselbe wie HTML. HTML ist der Quellcode, den du im Editor schreibst. Der DOM ist das, was der Browser daraus baut — und dieser Baum kann sich live verändern. Wenn JavaScript einen neuen Absatz einfügt, ist der im DOM, aber nicht im ursprünglichen HTML-Quelltext.

Frameworks wie React oder Vue umgehen den DOM nicht. Sie nutzen einen sogenannten "Virtual DOM" als Zwischenschicht, um Änderungen effizienter zu berechnen — aber am Ende landet alles im echten DOM des Browsers. Mehr dazu im Eintrag Framework.

Inspizieren ist erlaubt. In jedem Browser kannst du mit Rechtsklick → "Untersuchen" den aktuellen DOM-Zustand sehen. Das ist auch der Weg, mit dem Entwickler Webseiten debuggen.

Direkter DOM-Zugriff ist nicht immer der schnellste Weg. Wer in einer Schleife 1000 Mal appendChild aufruft, kann den Browser ins Schwitzen bringen. Profi-Tipp: Änderungen sammeln und in einem Rutsch einfügen.

DOM

Was ist der DOM?

Wie der DOM-Baum aussieht

Wie JavaScript auf den DOM zugreift

Event Bubbling — wie Klicks durch den Baum wandern

Warum ist der DOM für deine Website wichtig?

Häufige Missverständnisse rund um den DOM

Ähnliche Begriffe

Minification

Datenschutzerklärung

IP-Adresse