Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Mai 2008
Javascript DOM :: Anatomie des Document Object Model
Jedes XML-Dokument – also auch jedes (X)HTML-Dokument – ist ein Knotenbaum aus allen Elementen eines Dokuments, in dem klare verwandschaftliche Verhältnisse herrschen. Jedes Element des Dokuments stellt einen Knoten dar: alle Tags, Kommentare, Attribute und Inhalte.
Die Baumstruktur verbindet die Knoten durch Eltern-, Kind- und Nachbar-Beziehungen, so dass Javascript mit DOM-Methoden und -Eigenschaften durch den Baum navigieren kann und den Weg zu allen Elementen findet. Die DOM-Methoden in Javascript erzeugen neue Knoten und hängen sie an eine beliebige Stelle in den Baum oder entfernen Knoten mit all ihren Kindern.
- Das HTML-Element bildet die Wurzel des Baums und hat zwei Kinder: HEAD und BODY. HTML ist der Elternknoten sowohl von HEAD als auch von BODY. Das erste Kind des BODY-Elements ist das DIV-Element, in dem das Formular für die Suche und die Navigationselemente liegen.
Die Objekte des DOM besitzen Eigenschaften wie node.childNodes, die alle Kindknoten eines Knotens in einem Array sammelt oder node.nextSibling, die den nächsten Knoten auf derselben Ebene zurückgibt. Das nextSibling-Objekt von HEAD ist das body-Objekt, das previousSibling-Objekt von BODY ist das head-Objekt.
Die Familienverhältnisse kleiner Knoten des DOM-Baums
Dieses P-Element hat drei Kinder
<p>Jedes XML-Dokument <em>ist ein Knotenbaum</em> aus allen Elementen.</p>
-
- Das erste Kind ist der Textknoten "Jedes XML-Dokument ", das zweite Kind ist der Elementknoten EM und das dritte Kind ist der Textknoten "aus allen Elementen.". Das EM-Element hat ein Kind: den Textknoten "ist ein Knotenbaum". Textknoten haben keine Kinder.
Das Formular hat drei Kinder: einen Kommentar-Knoten und zwei P-Knoten. Der erste P-Knoten hat zwei Kinder: LABEL und INPUT. LABEL hat ein Kind: den Textknoten "Suche". Der zweite P-Knoten hat ein Kind: den Knoten LABEL, der wiederum auch nur ein Kind, nämlich den Knoten INPUT hat.
<form action="jsNodes.shtml" method="get" id="jsNodesFormF11">
<!-- Suche starten -->
<p>
<label for="suche">Suche</label>
<input type="text" name="suche" id="suche" />
</p>
<p>
<label for="speichern">
<input type="submit" id="speichern" value="Speichern" />
</label>
</p>
</form>
Die wichtigsten Knotentypen
DOM Core stellt das Dokument als eine Hierarchie von Knotenobjekten dar und weist den verschiedenen Knotenarten Eigenschaften und Methoden zu. Die wichtigsten Knoten haben wir schon in den beiden Beispielen kennen gelernt:
- Elementknoten, die HTML- oder XHTML-Elemente wie ein p-Element abbilden,
- Textknoten wie der Text „Jedes XML-Dokument“ im p-Elementknoten und
- Attributknoten, die z.B. das action-Attribut in einem Formular darstellen.
Besondere Knoten sind z.B. der 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_NODE | 1 | PROCESSING_INSTRUCTION_NODE | 7 |
| ATTRIBUTE_NODE | 2 | COMMENT_NODE | 8 |
| TEXT_NODE | 3 | DOCUMENT_NODE | 9 |
| CDATA_SECTION_NODE | 4 | DOCUMENT_TYPE_NODE | 10 |
| ENTITY_REFERENCE_NODE | 5 | DOCUMENT_FRAGMENT_NODE | 11 |
| ENTITY_NODE | 6 | NOTATION_NODE | 12 |
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 Methoden und Eigenschaften in Javascript, um Attribute zu lesen, ändern, 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. Durch die (korrekte) Interpretation von Leerzeichen und Zeilenumbrüchen hängen in FireFox, Opera und Safari leere Textknoten im DOM-Baum. Safari 1.3 und 2.0 unterschlagen Kommentare, während Internet Explorer sich die leeren Textknoten erspart.
Darüber hinaus ändern die Methoden des DOM den Knotenbaum dynamisch – ein neu erzeugter und in den Baum eingehangener Knoten ändert die Baumstruktur.
Klarheit darüber, aus welchen Elementen der Browser den Knotenbaum zusammensetzt, gibt es in den HTML- und DOM-Inspektoren von Safari und Firefox. Wenn der Browser keinen DOM-Inspektor besitzt, hilft das Skript Der kleine DOM-Inspektor.
- Das Develop-Menü in Safari ist ausgeblendet, bis es in den Einstellungen aktiviert wird.
Safari 3 | Safari bietet mit dem Develop-Menü die Werkzeuge zum Prüfen einer Webseite ähnlich dem Firebug-Add-on für Firefox.
- Das Firebug-Add-on für Firefox listet alle Elemente des DOM
Firefox 2 / 3 | Rundumversorgung mit allen Informationen zum Dokument findet man mit dem Firebug-Add-on.