DOM
Das DOM (Document Object Model) ist die vom Browser erzeugte, programmatisch veränderbare Baumstruktur eines HTML-Dokuments, über die JavaScript auf Inhalt und Struktur einer Seite zugreift.
Kurz erklärt
Lädt ein Browser eine HTML-Datei, wandelt er sie nicht einfach in feste Pixel um, sondern baut zunächst eine hierarchische Baumstruktur aus Objekten auf - das DOM. Jedes HTML-Element wird dabei zu einem Knoten in diesem Baum. JavaScript kann über das DOM lesend und schreibend auf diese Struktur zugreifen: Elemente hinzufügen, entfernen, verändern oder auf Ereignisse wie Klicks reagieren - und der Browser aktualisiert die sichtbare Darstellung entsprechend.
Beispiel
Ein Klick auf einen Button löst über JavaScript eine Funktion aus, die ein neues Listenelement in das DOM einfügt. Der Browser rendert diese Änderung sofort sichtbar nach, ohne dass die Seite neu geladen werden muss - der ursprüngliche HTML-Quellcode bleibt dabei unverändert, nur die im Speicher gehaltene DOM-Struktur wurde angepasst.
Warum ist das relevant?
Das DOM ist die Schnittstelle, über die praktisch jede dynamische, interaktive Funktion einer Webseite technisch umgesetzt wird. Moderne Frontend-Frameworks wie React oder Vue abstrahieren zwar den direkten DOM-Zugriff, arbeiten letztlich aber ebenfalls darauf hin, das DOM effizient zu aktualisieren. Häufige DOM-Manipulationen können zudem die Performance einer Seite spürbar beeinflussen, da jede Änderung potenziell ein Neuzeichnen sichtbarer Bereiche auslöst.
Häufige Missverständnisse
Das DOM ist nicht identisch mit dem ursprünglichen HTML-Quellcode einer Seite - es ist eine Live-Repräsentation im Speicher des Browsers, die sich durch JavaScript jederzeit von der ursprünglichen HTML-Datei unterscheiden kann (sichtbar etwa im “Elements”-Tab der Browser-Entwicklertools gegenüber der Ansicht “Seitenquelltext anzeigen”). Auch ist das DOM keine JavaScript-spezifische Erfindung - es ist eine sprachunabhängige Programmierschnittstelle (API), die auch von anderen Sprachen angesprochen werden kann.