Arboreal – DOM-Model mit Firebug verstehen

Ein Browser, der von einem Webserver einen HTML-Quelltext einliest (parst), erstellt zunächst einen virtuellen Dokumentenbaum, der den hierarchischen Aufbau beschreibt. Die Fachbezeichnung hierfür lautet Document Object Model, abgekürzt DOM. Die nachfolgende Abbildung zeigt, wie ein solches Modell für einen einfachen Dokumentenbaum aussehen kann:

Document Object Model

Einfacher HTML-Dom-Baum (Document Object Model)

Das oberste Element einer jeden Webseite ist immer html. Von html gehen zwei Elemente ab, nämlich head und body. Bildlich gesprochen sind head und body Kinder von html und somit Geschwister. body wiederum hat weitere Nachfahren, die man wiederum als Eltern- und Kind-Elemente zuordnen kann. In meinem CSS-Buch habe ich detailliert beleuchtet, nach welchen Regeln ein Browser einen Quelltext einliest und interpretiert (siehe sog. Kaskadierungs- und Vererbungsregeln ab Seite 125).

Wer sich den hierarchischen Aufbau des DOM-Baums wie oben in grafisch aufbereiteter Form ansehen möchte, sollte sich unbedingt die Firebug-Erweiterung namens Arboreal installieren. Die Bedienung ist denkbar einfach: Im rechten Fenster erscheint eine zusätzliche Registerkarte mit dem Namen “Visualisation”. Ein Klick auf das jeweilige Element öffnet im rechten Fenster den zugehörenden HTML-Eintrag. Dort können Sie nun wie gewohnt im Firebug weiterarbeiten und im rechten Fenster über die Registerkarte Styles die CSS-Regeln bearbeiten.

Ausschnitt der Arboreal-Ansicht

Ausschnitt der Arboreal-Ansicht

Da die Grafik höchstwahrscheinlich über den sichtbaren Bereich hinausragt, können Sie sie mit gedrückter linker Maustaste verschieben. Um die gesamte Bildschirmbreite auszunutzen, bietet es sich ferner an, unter “Einstellungen” den Punkt “Vertikale Fenster” zu aktivieren. Möchten Sie, mit dem Ziel einer besseren Übersichtlichkeit, die Grafik verkleinern, können Sie dies unter “Schriftgröße” /  “Schrift verkleinern” tun.

Arboreal im Zusammenspiel mit Firebug mit aktiviertem Vertikale Fenster

Arboreal im Zusammenspiel mit Firebug mit aktiviertem vertikalen Fenster

Alternativ gibt es auch noch die Firefox-Erweiterung DOM Inspector, welche allerdings keine grafische Aufbereitung anbietet.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Bisher keine Kommentare.

Hinterlasse eine Antwort