Das Document Object Model (DOM) ist eine plattform- und sprachneutrale Schnittstelle, die ein HTML- oder XML-Dokument als hierarchische Baumstruktur aus programmierbaren Objekten im Speicher des Browsers repräsentiert.
Was bedeutet das?
Wenn ein Browser eine HTML-Seite lädt, parst er den Quelltext und baut daraus eine interne Baumstruktur auf. Jedes HTML-Element wird zu einem Knoten (Node) in diesem Baum. Das <html>-Element bildet die Wurzel des Baums. Darunter folgen <head> und <body> als direkte Kinder. Jedes weitere Element, jeder Textinhalt, jedes Attribut und jeder HTML-Kommentar ist ebenfalls ein Knoten mit definierten Eigenschaften und Beziehungen zu seinen Nachbarn. Dieses Modell nennt sich Document Object Model.
Das DOM ist die Schnittstelle zwischen HTML-Dokumenten und JavaScript. Über die DOM-API kann JavaScript auf jeden Knoten der Seite zugreifen, ihn lesen, verändern, neue Knoten einfügen oder vorhandene entfernen. Methoden wie document.getElementById('id'), document.querySelector('.klasse') oder document.querySelectorAll('h2') liefern Verweise auf Elemente. Über diese Verweise lassen sich Texte, Attribute, CSS-Klassen und Stile zur Laufzeit verändern, ohne die Seite neu zu laden. Moderne JavaScript-Frameworks wie React oder Vue arbeiten intern mit einem „Virtual DOM“, einer optimierten In-Memory-Kopie des echten DOM, um unnötige Neuberechnungen zu vermeiden.
Das DOM ist lebendig: Es verändert sich, wenn JavaScript Elemente manipuliert oder wenn Benutzer mit der Seite interagieren. Der ursprüngliche HTML-Quelltext auf dem Server bleibt dabei unverändert. Was die Browser-DevTools unter „Inspektor“ oder „Elements“ zeigen, ist das aktuelle DOM, nicht der ursprüngliche Quelltext. Diese Unterscheidung ist beim Debuggen wichtig: Eine Änderung, die JavaScript im DOM vornimmt, schlägt sich nicht automatisch in der HTML-Datei auf dem Server nieder.
Beispiel aus der Praxis
Ein WordPress-Plugin lädt beim Seitenaufruf ein JavaScript, das nach dem vollständigen Laden der Seite alle externen Links automatisch mit target="_blank" und rel="noopener noreferrer" versieht. Das Plugin durchsucht dazu das DOM mit document.querySelectorAll('a[href^="http"]'), filtert Links auf externe Domains und setzt per JavaScript die gewünschten Attribute. Im Quelltext der HTML-Seite auf dem Server fehlen diese Attribute noch; im DOM, das der Browser gerendert hat, sind sie vorhanden. Suchmaschinenbots, die den Quelltext crawlen, sehen die Attribute hingegen nicht.
Häufiger Fehler
JavaScript-Code, der DOM-Elemente ansprechen soll, wird oft zu früh ausgeführt, bevor der Browser den relevanten HTML-Abschnitt geparst und ins DOM übernommen hat. Das führt dazu, dass Methoden wie document.getElementById() den Wert null zurückgeben und Folgeoperationen mit einem JavaScript-Fehler abbrechen. Korrekte Lösungen: den Code am Ende des <body>-Tags platzieren oder in einen DOMContentLoaded-Event-Listener einwickeln. WordPress-Plugins, die Skripte über wp_enqueue_script() mit dem Parameter $in_footer = true laden, vermeiden dieses Problem automatisch.