DOM (Document Object Model)

Das Document Object Model (DOM) ist eine programmiersprachenneutrale Schnittstelle, die HTML- und XML-Dokumente als Baumstruktur darstellt. Es ermöglicht Programmen und Skripten, dynamisch auf den Inhalt, die Struktur und den Stil von Webdokumenten zuzugreifen und diese zu manipulieren.

Was ist das DOM?

Das DOM stellt eine Webseite als hierarchische Baumstruktur dar, in der jedes Element, Attribut und Textstück als Knoten repräsentiert wird. Diese Struktur ermöglicht es JavaScript und anderen Programmiersprachen, mit Webseiten zu interagieren und diese dynamisch zu verändern.

Struktur des DOM

Hierarchische Baumstruktur mit Eltern-Kind-Beziehungen
Verschiedene Knotentypen (Element, Attribut, Text)
Dokumentfragmente für effiziente Manipulation
Traversierung durch die Baumstruktur
Standardisierte Schnittstellen

Code-Beispiele

Element-Selektion und Manipulation

// Element per ID auswählen
const element = document.getElementById('meinElement');

// Inhalt ändern
element.textContent = 'Neuer Text';

// Klasse hinzufügen
element.classList.add('highlight');

Neues Element erstellen und einfügen

// Neues Element erstellen
const neuElement = document.createElement('div');
neuElement.textContent = 'Dynamisch erstellt';

// In das Dokument einfügen
document.body.appendChild(neuElement);

Wichtige DOM-Methoden

querySelector/querySelectorAll für moderne Elementauswahl
getElementById/getElementsByClassName für spezifische Selektionen
createElement/removeElement für DOM-Manipulation
appendChild/removeChild für Strukturänderungen
innerHTML/textContent für Inhaltsmanipulation

Event-Handling

Ereignisgesteuerte Programmierung
Event-Listener für Benutzerinteraktionen
Event-Bubbling und -Capturing
Event-Delegation für dynamische Elemente
Standardverhalten verhindern

DOM-Schnittstellen

Core DOM für grundlegende Funktionalität
HTML DOM für webspezifische Features
XML DOM für XML-Dokumente
Event-Modell für Interaktionen
Style-Manipulation über CSS