Das DOM: Wie der Browser dein HTML versteht

vom 03.11.2010 von Leo Kobes

Deine HTML-Datei ist Text. Was der Browser daraus intern baut, ist etwas anderes: ein Baum aus Objekten, das Document Object Model, kurz DOM. Dieses Modell ist die eigentliche Seite, auf ihr arbeiten CSS, JavaScript und Hilfstechnik. Wer das DOM einmal begriffen hat, versteht eine ganze Reihe von Dingen plötzlich muhelos.

Vom Text zum Baum

Aus diesem HTML...

<body>
    <h1>Mein Aquarium</h1>
    <p>Neu: drei <strong>Neonsalmler</strong>!</p>
</body>

...wird dieser Baum

body
├── h1
│   └── "Mein Aquarium"
└── p
    ├── "Neu: drei "
    ├── strong
    │   └── "Neonsalmler"
    └── "!"

Jedes Element wird ein Knoten, verschachtelte Elemente werden Kinder, Text wird zu Textknoten. Die Verwandtschaftsbegriffe daraus benutzt du längst: Eltern, Kinder, Geschwister, genau die Sprache der CSS-Selektoren. Ein Selektor wie p strong heißt übersetzt: alle strong-Knoten die im Baum unterhalb eines p hängn.

Warum dich das DOM auch ohne JavaScript betrifft

Der Browser repariert im DOM. Vergisst du ein schließendes Tag, biegt der Browser sich beim Baumbau etwas zurecht, und zwar nicht immer das was du meintest. Deshalb zeigt die Elementansicht der Entwicklerwerkzeuge (F12) manchmal eine andere Verschachtelung als dein Quelltext: Du siehst dort das DOM, nicht deine Datei. Ein unschätzbares Diagnose-Werkzeug.
Screenreader lesen das DOM, nicht deinen Quelltext und nicht das gerenderte Bild. Sauberes, semantisches HTML ergibt einen sauberen Baum, und ein sauberer Baum lässt sich sinnvoll vorlesen und bedienen.
CSS-Vererbung läuft am Baum entlang: Schriftregeln am body erben sich zu allen Nachkommen durch, wie im Kapitel Schriftarten beschriebenn.

Und mit JavaScript?

JavaScript ist das Werkzeug, mit dem man das DOM nachträglich verändert: Knoten suchen, Inhalte austauschen, auf Klicks reagieren. Unsere Spielwiese tut genau das, sie ist übrigens das einzige Skript im ganzen Wiki. JavaScript selbst ist dann ein eigenes, großes Lerngebiet, aber mit HTML-Verständnis und dem Baum-Bild im Kopf hast du sein Fundament schon gelegtt.

Verwandt: Was ein Browser tut · Block und Inline · Glossar