Weitere Infos
Sie lesen:
LB1 (2009)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
11.1 Überblick: DOM und Kaskade
Eine HTML-Datei ist im Grunde genommen nichts anderes als eine hierarchische Verschachtelung von HTML-Elementen. Wenn ein Browser vom Webserver einen Quelltext bekommt, versucht er als
Erstes, sich eine Übersicht über diese Hierarchie zu verschaffen, und erstellt dazu ein Modell.
Der Browser nennt dieses Modell des Quelltextes das »Document Object Model« (abgekürzt DOM), weil es ein Modell der Objekte, also der Dinge auf einer Webseite ist. Wie bei Computern üblich, steht auch dieser Baum auf dem Kopf:
- Das oberste Element einer jeden Webseite ist html. Das Stammelement. Abraham. Der Urvater aller Elemente auf dieser Seite.
- Von html gehen zwei Elemente ab: head und body. Man kann also sagen, dass sowohl head als auch body Kinder von html und somit Geschwister sind.
Und so ist das ganze HTML-Dokument eine schrecklich nette Familie mit diversen verwandtschaftlichen Beziehungen und Al Bundy in der Rolle des body.
Der DOM-Baum für die Startseite
In Abbildung 11.1 sehen Sie einen Ausschnitt aus dem Baum für die Startseite index.html.
Sie sind kein Browser und müssen nicht für jede Webseite einen solchen Stammbaum entwerfen, aber bei der Planung des Stylesheets oder wenn etwas partout nicht klappen will, ist so ein DOM-Baum manchmal durchaus hilfreich.
Ob Sie ihn auf Papier skizzieren oder gedanklich im Kopf entwerfen, spielt dabei keine Rolle, wobei für Einsteiger die Papiervariante einfacher sein dürfte.
Drei Konzepte: Kaskade, Vererbung und Standardwert
Nachdem der Browser den Dokumentenstammbaum erstellt hat, versucht er herauszufinden, wie er die HTML-Elemente im Browserfenster darstellen soll. Dabei muss er für jedes zu gestaltende Element jeder CSS-Eigenschaft einen eindeutigen Wert zuweisen.
Sollte er dabei für eine bestimmte CSS-Eigenschaft genau einen Wert finden, nimmt er ihn. Klare Sache. Wenn es hingegen keinen oder mehrere Werte gibt, helfen dem Browser drei Konzepte bei seiner Entscheidung:
- Kaskade
- Vererbung
- Standardwert
Diese drei Konzepte werden im Folgenden vorgestellt und erläutert.
Beispiel: margin-bottom für #navibereich ul
Im folgenden Abschnitt soll für die Navigationsliste ul der Beispielsite herausgefunden werden, wie viel margin-bottom sie bekommt:
Die Frage lautet also: »Wie viel unteren Außenrand bekommt die ungeordnete Liste im Navigationsbereich?« Los geht’s. Sie sind der Browser. Los geht es zunächst mit der Sammlung aller relevanten Deklarationen.
Deklaration, Eigenschaft und Wert und so
Nur zur Erinnerung: Eine Deklaration ist die Kombination aus Eigenschaft und Wert. Getrennt durch einen Doppelpunkt, beendet mit einem Semikolon, zum Beispiel:
- margin-bottom: 1em;
Ein anderes Wort für "Deklaration" ist "Anweisung".