Mai 2008

Javascript DOM :: Anatomie des Document Object Model

Jedes XML-Dokument – also auch jedes (X)HTML-Dokument – ist ein Baum aus allen Elementen des Dokuments, in dem klare Verwandtschaft-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-Funktionen und -Eigenschaften durch den Baum navigieren kann und den Weg zu allen Elementen findet.

Die DOM-Funktionen in Javascript erzeugen neue Knoten und hängen sie an eine beliebige Stelle in den Baum oder entfernen Knoten mit all ihren Kindern.

DOM-Hierarchie.png

Das HTML-Element bildet die Wurzel des Baums und hat zwei Kinder: HEAD und BODY.

HTML ist der Elternknoten von HEAD als auch von BODY.


Die Objekte des DOM besitzen Eigenschaften wie

  • node.childNodes, das alle Kindknoten eines Knotens in einem Array sammelt,
  • node.nextSibling, das den nächsten Knoten auf derselben Ebene zurückgibt.

Die Familienverhältnisse kleiner Knoten im DOM-Baum

Dieses P-Element hat drei Kinder

<p>Jedes XML-Dokument <em>ist ein Knotenbaum</em> aus allen Elementen.</p>
PMitEmKnoten.png
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>
formKnoten.png

Das id-Attribut der HTML-Tags ist immer wieder ein direkt Einstieg in den DOM-Baum. Damit ein Javascript nicht immer wieder »von oben herab« den gesamten DOM-Baum durchlaufen muss, gibt es Methode wie document.getElementById.