DOM (Document Object Model)-Grundlagen

Was ist das DOM?

Das DOM (Document Object Model) ist die Darstellung einer HTML-Seite als Objektbaum im Browser. Sobald die Seite geladen ist, kann JavaScript über das DOM auf Elemente zugreifen und sie verändern.

Kurz gesagt: HTML ist der Quellcode – das DOM ist die lebende Struktur, mit der JavaScript arbeitet.

Der DOM-Baum

Der Browser baut aus dem HTML eine Baumstruktur. Jedes Tag wird zu einem Knoten, und verschachtelte Tags werden zu Kindknoten.

HTML

1<html>
2    <head>
3        <title>Dom Gundlagen</title>
4    <head>
5    <body>
6        <h1>Willkommen</h1>
7        <p>Das ist ein Absatz.</p>
8    </body>
9<html>

DOM-Baum (vereinfacht)

1document
2 └── html
3      ├── head
4      └── body
5           ├── h1  →  "Willkommen"
6           └── p   →  "Das ist ein Absatz."

Knoten und Elemente

Im DOM gibt es verschiedene Arten von Knoten. Die wichtigsten:

Elementknoten – HTML-Tags wie div, p oder button
Textknoten – der sichtbare Text innerhalb eines Elements
Attributknoten – Eigenschaften wie id, class oder href

Wenn du später von „Elementen finden“ sprichst, meinst du meist die Elementknoten im DOM.

Das document-Objekt

Über document greifst du auf die gesamte Seite zu. Es ist der Einstiegspunkt für fast alle DOM-Operationen.

document

1console.log(document.title);
2console.log(document.body);

Output

document.title gibt den Seitentitel aus dem <title>-Tag zurück, z. B.:

Dom Gundlagen

document.body gibt das gesamte <body>-Element als Objekt zurück. In der Konsole siehst du z. B.:

<body>
  <h1>Willkommen</h1>
  <p>Das ist ein Absatz.</p>
</body>

Im nächsten Kapitel lernst du, wie du mit Methoden wie querySelector gezielt Elemente findest und änderst.

Warum das DOM wichtig ist

Mit dem DOM kannst du z. B.:

Texte und Inhalte dynamisch ändern
Elemente ein- und ausblenden
auf Klicks und Eingaben reagieren
neue HTML-Elemente erzeugen und einfügen

Ohne DOM bliebe JavaScript auf reine Logik beschränkt – erst das DOM verbindet den Code mit der sichtbaren Webseite.

Im nächsten Kapitel lernst du: DOM Manipulation