Das Document Object Model (DOM) ist die Programmierschnittstelle, über die JavaScript den Inhalt einer Webseite liest und verändert. Der Browser baut aus dem geladenen HTML einen Baum aus Knoten auf: Jedes Element, jeder Text und jedes Attribut wird zu einem Knoten.
Die Baumstruktur
Oben im Baum steht das document-Objekt. Darunter folgen <html>, <head> und <body> und dann alle verschachtelten Elemente. Eltern- und Kindknoten bilden die Hierarchie ab:
document
└─ html
├─ head
│ └─ title
└─ body
├─ h1
└─ pElemente finden und ändern
Mit Methoden des document-Objekts greift man auf einzelne Knoten zu:
// Element finden
const ueberschrift = document.getElementById('titel');
const buttons = document.querySelectorAll('button');
// Inhalt ändern
ueberschrift.textContent = 'Neuer Titel';
// Neues Element erzeugen und anhängen
const p = document.createElement('p');
p.textContent = 'Hallo DOM';
document.body.appendChild(p);Über Ereignis-Listener reagiert das Skript auf Nutzeraktionen wie Klicks, Tastatur oder Formulareingaben: button.addEventListener('click', ...).
DOM und CSS
Auch das Styling läuft über das DOM: CSS-Klassen werden per classList.add() gesetzt, Inline-Stile über die style-Eigenschaft. So lassen sich Oberflächen dynamisch umgestalten – die Grundlage jeder SPA.
Virtuelles DOM
Frameworks wie React und Vue arbeiten zusätzlich mit einem virtuellen DOM: Sie berechnen Änderungen erst in einem internen Abbild und übertragen danach nur die tatsächlich betroffenen Knoten in das echte DOM. Das macht viele kleine Updates schneller.