Nützliche Helfer beim Arbeiten mit dem DOM

Gute englischsprachige Dokumentation bietet http://www.w3schools.com/js/js_htmldom.asp. Dort gibt es sowohl eine ausführliche Referenz aller Objekte und Methode als auch Tutorials zum Thema. Auch das deutsche Standardwerk Selfhtml ist eine gute Hilfestellung.

Für den Browser Firefox gibt es zwei Module, die bei der Entwicklung sehr hilfreich sind. Zum einen ist das der “DOM Inspector”, den Sie über das Menü “Extras” oder die Kurzform [Strg]+[Umschalt]+I aufrufen. Er zeigt die DOM-Hierarchie der aktuellen Seite und zeigt jedes im Baum gewählte Objekt durch optische Hervorhebung in der Browserdarstellung der Seite. Ist in Ihrem Firefox der DOM Inspector nicht erreichbar, dann haben Sie bei der Installation die “Developer Tools” nicht ausgewählt, wozu dieser Helfer gehört.

Eine Nachrüstung dieser Tools ist leider nicht möglich. Sie müssen also den Firefox entfernen und wieder installieren. Keine Angst, alle Bookmarks und Einstellungen sind danach noch vorhanden. Wählen Sie bei der Installation die benutzerdefinierte Variante. Dann sind die “Developer Tools” anwählbar.

DOM-baum mit DOM Inspector

Unbedingt empfehlenswert ist auch der “Web Developer”. Um diese Extension zu laden, gehen Sie in Firefox auf “Extras – Erweiterungen” und klicken auf das Link “Erweiterungen herunterladen”. Daraufhin landen Sie im Browser-Fenster auf der Seite “mozilla update”. Geben Sie im Suchfeld rechts oben “web developer” ein, klicken in den Suchergebnissen auf diesen Eintrag und stimmen der Installation der Erweiterung zu.. Diese Erweiterung stellt Web-Programmierern in einer separaten Symbolleiste ein ganzes Arsenal an wichtigen Funktionen zur Verfügung. So ist damit beispielsweise die grafische Einblendung aller Tabellenzellen der aktuellen Seite möglich. Hilfreich bei Layout-Problemen ist die Einblendung aller CSS-Klassen und Ids durch kleine Labels, die die einzelnen HTML-Elemente verpasst bekommen.

Für DOM-Programmierer sind besonders zwei Knöpfe in der Web Developer Toolbar interessant. Wie Warnlampen zeigen sie an, ob Warnungen oder Fehler in der Javascript-Engine aufgetreten sind. Ein Klick darauf bringt dann diese Probleme in einer Listendarstellung mit der Nennung der betreffenden Zeilennummer.

Ähnliche Beiträge