Mai 2008

Javascript DOM Nodes – Knotentypen

DOM Core stellt das Dokument als eine Hierarchie von Knotenobjekten dar und weist den verschiedenen Knotenarten Eigenschaften und Methoden zu.

Mit einer Abfrage der Knotentypen kann ein Javascript sicherstellen, dass der richtige Knoten auch tatsächlich erwischt wurde, denn auf das XML/HTML-Markup ist nicht unbedingt Verlass.

Hilfe bei der Fehlersuche im DOM-Baum bieten die DOM-Inspektoren von Safari und Firebug für Firefox.

Die wichtigsten Knoten sind:

  • Elementknoten, die HTML- oder XHTML-Elemente wie ein a-Tag oder ein div-Tag abbilden,
  • Textknoten wie der Text „Jedes XML-Dokument“ im p-Elementknoten und
  • Attributknoten, z.B. das action-Attribut in einem Formular oder das style-Attribut in einem div-Tag.

Besondere Knoten sind z.B. DOCUMENT_TYPE_NODE, der in jedem Dokument präsent sein muss und die Art des Dokuments angibt (<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">) und das oberste Objekt des Dokumentenbaums, der DOCUMENT-Knoten.

ELEMENT_NODE1PROCESSING_INSTRUCTION_NODE7
ATTRIBUTE_NODE2COMMENT_NODE8
TEXT_NODE3DOCUMENT_NODE9
CDATA_SECTION_NODE4DOCUMENT_TYPE_NODE10
ENTITY_REFERENCE_NODE5DOCUMENT_FRAGMENT_NODE11
ENTITY_NODE6NOTATION_NODE12

Mit Javascript node.nodeType und node.nodeName kann eine zusätzliche Sicherung in das Script eingebaut werden. Gerade bei der Navigation durch den DOM-Baum führen die Inkonsistenzen der Browser zu Fehlern – so machen z.B. der Leerraum zwischen Tags und Zeilenumbüche die Navigation mit nextSibling oder previousSibling schnell zum Irrweg.

DOM Attributknoten

Attributknoten wiederum sind etwas ganz Besonderes. Sie treten im Baum nicht als Knoten auf, sind auch keine Kinder von Elementknoten, sondern Eigenschaften eines Elementknotens.

Auch für Attributknoten gibt es in Javascript Methoden und Eigenschaften, um Attribute zu lesen, zu ändern, zu löschen und um neue Attribute in einen Elementknoten zu setzen.

DOM-Inspektoren

So weit die Theorie, denn ganz so einfach ist die Obsternte im Knotenbaum nicht. Heute müssen Script nicht nur funktionieren – Besucher verlangen nach schnellen Anwendungen.

Durch das zunehmende Interesse an Javascript in den letzten Jahren gibt es sehr gute Tools für die Entwicklung und das Debuggen von Javascript.

Firebug

Firebug ist eine Erweiterung für Firefox, die sich wie kaum eine andere Erweiterung zur Analyse des DOMs einer Webseite eignet.

Im DOM-Tab zeigt Firebug alle DOM-Elemente der Webseite und ihre Eigenschaften und erlaubt direkte Änderungen im DOM.

Firebug beherbergt zudem einen ausgefeilten Script-Debugger, mit Break-Points zum Anhalten des Scripts, mit denen ein Script bei der Fehlersuche Schritt für Schritt durchgeführt werden.

Entwickler-Menü für Safari

Das Menü »Entwickler« in Safari ist ausgeblendet, bis es in den Einstellungen aktiviert wird. Das Entwickler-Menü von Safari bietet einen ähnlichen Umfang wie Firebug für Firefox: Javascript-Debugging mit Break-Points, DOM zum Auf- und Zuklappen.

Safari >> Einstellungen >> Erweitert

Menü »Entwickler« in der Menüleiste anzeigen aktivieren. Dann erscheint ein neuer Menüeintrag in der Menüleiste.

DeveloperBar für IE

Visual Web Developer Express Entwickler-Tools von Microsoft zum Editieren und debuggen von Webseiten

YSlow

YSlow für Firebug: Eine Erweiterung für Firefox, Safari, Chrome und Opera, die besonders für das Performance-Tuning von Webseiten entsprechend den Regeln von Yahoo für High-Performance-Webseiten ausgelegt ist.

DevBar für Firefox

DevBar für Firefox ist besonders gut für die Entwicklung des Webdesigns: Alle Tabellen anzeigen, alle Divs anzeigen, CSS-Stile on-the-fly ändern.