Das Document Object Model (DOM) ist eine Programmierschnittstelle (API), mit der Webinhalte dynamisch verändert, strukturiert oder ausgelesen werden können. Eine Webseite wird im Browser in eine Baumstruktur umgewandelt, bei der jedes HTML-Element (wie ‘<div>’, ‘<p>’, ‘<a>’) ein „Knoten“ im DOM ist.
Stell dir das DOM wie ein interaktives Abbild der Webseite vor:
- Document: Das gesamte HTML-Dokument.
- Object: Jedes Element ist ein Objekt mit Eigenschaften und Methoden.
- Model: Die Struktur bildet ein hierarchisches Modell, ähnlich einem Stammbaum.
Mit Hilfe von JavaScript lässt sich über das DOM beispielsweise der Text einer Schaltfläche ändern, ein neues Element einfügen oder eine CSS-Klasse hinzufügen. Das DOM ist also die technische Grundlage für viele interaktive Funktionen moderner Webseiten.
Tipp:
Wenn du Webseiten dynamisch verändern möchtest, ist ein solides Verständnis des DOM unerlässlich – es ist die Brücke zwischen HTML und JavaScript.
