Was ist das DOM?

Das Document Object Model, kurz DOM, ist ein plattformneutrales Modell und eine Programmierschnittstelle für strukturierte Dokumente wie HTML und XML. Ein Browser stellt das geladene Dokument als Baum aus Knoten dar. Skripte können diese Knoten lesen, verändern, hinzufügen oder entfernen und auf Ereignisse reagieren. Professionelle Webentwicklung berücksichtigt bei DOM-Manipulationen zugleich Performance, sichere Ausgaben und barrierefreie Interaktionen.

Wie entsteht der DOM-Baum?

1. Analyse des Markups: Der Browser liest den HTML‑Quelltext und beginnt, ihn zu interpretieren.
2. Objekte erzeugen: Für Dokument, Elemente, Text, Kommentare und weitere Knotentypen werden Objekte erstellt.
3. Struktur abbilden: Eltern‑Kind‑Beziehungen bilden die Verschachtelung des Dokuments → daraus entsteht die Baumstruktur.
4. Automatische Ergänzungen: Der Parser kann fehlende Strukturen ergänzen (z. B. geschlossene Tags).
5. Dynamische Veränderungen: JavaScript kann den DOM‑Baum nach dem Laden verändern, Elemente hinzufügen oder entfernen.

Zugriff mit JavaScript

Über Methoden wie querySelector lassen sich Elemente auswählen. Eigenschaften wie textContent, classList oder Attribute können Inhalte und Darstellung beeinflussen. createElement und append ermöglichen neue Knoten. Ereignislistener reagieren etwa auf Klicks, Tastatureingaben oder Formularänderungen. Dadurch bildet das DOM eine zentrale Verbindung zwischen Dokumentstruktur und interaktivem Verhalten.

DOM und Darstellung

Eine DOM-Änderung muss nicht automatisch sichtbar sein, kann aber eine Neuberechnung von Styles, Layout oder Darstellung auslösen. Viele einzelne Lese- und Schreibzugriffe können deshalb unnötige Arbeit verursachen. Sinnvoll sind gebündelte Aktualisierungen, passende CSS-Klassen und eine Struktur, die nicht mehr Knoten als nötig enthält. Die tatsächlichen Auswirkungen sollten mit Browserwerkzeugen gemessen werden.