DOM
Das DOM ist die Struktur, in die ein Browser eine geladene Webseite im Arbeitsspeicher übersetzt: eine Baumdarstellung aus Überschriften, Absätzen, Bildern und Schaltflächen. Programme können diesen Baum lesen und verändern, wodurch sich eine Seite ändert, ohne neu geladen zu werden.
Wenn du eine Internetseite aufrufst, lädt dein Browser zuerst eine Textdatei herunter. Darin steht in einer festen Notation, welche Überschriften, Absätze, Bilder und Knöpfe die Seite hat. Der Browser liest diesen Text und baut daraus im Arbeitsspeicher eine geordnete Struktur nach. Diese Struktur heißt DOM, ausgeschrieben Document Object Model. Sie ist wie ein Stammbaum aufgebaut: ganz oben das Dokument, darunter größere Bereiche, darunter deren einzelne Bestandteile. Was du auf dem Bildschirm siehst, ist die Darstellung genau dieser Struktur.
Warum Seiten sich ändern, ohne neu zu laden
Früher war eine Webseite ein starres Blatt Papier. Wolltest du etwas anderes sehen, musste der Browser die komplette Seite neu vom Server holen. Das DOM hat das geändert. Weil die Seite als veränderbare Struktur im Speicher liegt, kann ein Programm einzelne Teile davon austauschen. Der Browser zeichnet danach nur das Veränderte neu.
Genau darauf beruht praktisch jede moderne Web-Anwendung. Ein Like-Zähler springt von 14 auf 15, ohne dass die Seite flackert. Ein Suchfeld zeigt Vorschläge, während du tippst. Ein Chatverlauf wächst nach unten, während du zusiehst. In allen Fällen wird nicht die Seite neu geladen, sondern nur der Baum im Speicher angepasst.
Das DOM ist außerdem die gemeinsame Schnittstelle, auf die sich alle Browser geeinigt haben. Ein Programm, das den Baum verändert, funktioniert deshalb in Chrome, Firefox und Safari gleichermaßen. Ohne diesen Standard müsste man jede Seite für jeden Browser getrennt schreiben.
Der Seitenbaum und seine Knoten
Jedes Element der Seite ist im DOM ein sogenannter Knoten. Ein Absatz ist ein Knoten, ein Bild ist ein Knoten, ein Text innerhalb eines Absatzes ebenfalls. Knoten enthalten andere Knoten, so entsteht die Baumstruktur. Man spricht dabei wie in einer Familie von Eltern- und Kindelementen. Ein Absatz, der in einem Artikelbereich steht, ist dessen Kind.
Verändert wird der Baum meist mit JavaScript, der Programmiersprache, die direkt im Browser läuft. Ein Programm sucht sich zuerst einen Knoten heraus, etwa über dessen Namen oder eine vergebene Kennung. Danach kann es den Text darin ersetzen, die Farbe ändern, den Knoten löschen oder einen neuen einhängen. Der Browser bemerkt jede dieser Änderungen und zeichnet die Seite entsprechend neu.
Ein häufiger Irrtum: DOM und der ursprüngliche Seitentext sind nicht dasselbe. Der Text ist nur der Bauplan, das DOM das fertige Gebäude. Schaust du dir den Quelltext einer Seite an, siehst du den Bauplan von vorhin. Der aktuelle Zustand kann längst ganz anders aussehen, weil Programme den Baum inzwischen umgebaut haben.
DOM in Entwicklerwerkzeugen, Frameworks und KI-Agenten
Am direktesten begegnest du dem DOM in den Entwicklerwerkzeugen deines Browsers. Ein Rechtsklick auf ein Element und die Option « Untersuchen » öffnen eine aufklappbare Baumansicht der Seite. Dort kannst du Überschriften umschreiben oder Elemente ausblenden und siehst die Wirkung sofort. Diese Änderungen bleiben allerdings nur bei dir und verschwinden beim Neuladen.
In der Softwareentwicklung tauchen rund um das DOM ganze Werkzeugkästen auf, sogenannte Frameworks wie React oder Vue. Sie nehmen Entwicklern die kleinteilige Arbeit am Baum ab und entscheiden selbst, welche Knoten geändert werden müssen. Bekannt ist dabei das Schlagwort virtuelles DOM: eine Kopie des Baums, an der zuerst gerechnet wird, bevor der echte Baum angefasst wird.
Neuerdings spielt das DOM auch bei KI eine Rolle. Programme, die selbstständig im Netz Formulare ausfüllen oder Preise vergleichen, lesen den Seitenbaum aus, statt Bildschirmfotos zu deuten. Auch klassische Datensammler im Netz arbeiten so. Wenn in Meldungen über solche Agenten steht, sie « interagieren mit der Seite », ist meist genau das gemeint.