http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Das Document Object Model (DOM)

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Das Document Object Model (DOM) ist eine W3C-Empfehlung, die Programmen eine allgemeine Vorgehensweise für den Zugriff auf Bestandteile eines Dokuments liefert. Das DOM beschreibt Objekte, Eigenschaften und Methoden und ist sowohl im XML- als auch im JavaScript-Umfeld von großer Bedeutung.

Dabei wird die Struktur des Dokuments, beispielsweise eines XHTML-Dokuments, so dargestellt wie das Verhältnis verwandter Familien zueinander in einem Familienstammbaum. Es gibt Vorfahren, Nachfahren, Eltern, Kinder und Geschwister. Daher spricht man in diesem Zusammenhang auch häufig von einem »Dokumentstammbaum«.


Abb. 4.4: Der Dokumentstammbaum des XHTML-Grundgerüsts

Abbildung 4.4 zeigt den Dokumentstammbaum des XHTML-Dokuments aus Listing 4.3. Die Bedeutung der aus dem alltäglichen Sprachgebrauch bekannten Begriffe lässt sich sehr einfach auf die Abbildung übertragen, zur besseren Verständlichkeit erläutere ich sie jedoch kurz:

  • Kindelement: Ein Element A ist Kind eines Elements B, wenn A direkt von B abstammt. Hier ist head Kind von html, title wiederum Kind von head.
  • Elternelement: Ein Element A ist das Elternelement eines Elements B, wenn B Kind von A ist. Folglich ist html Elternelement von head und head wiederum Elternelement von title.
  • Geschwisterelement: Ein Element A ist Geschwisterelement eines Elements B, wenn beide Elemente vom selben Elternelement abstammen. Die Elemente head und body sind Geschwisterelemente. Darüber hinaus unterscheidet man zwischen vorhergehenden und nachfolgenden Geschwisterelementen: head ist vorhergehendes Geschwisterelement von body, body wiederum ist nachfolgendes Geschwisterelement von head.
  • Vorfahrenelement: Ein Element A ist Vorfahrenelement eines Elements B, wenn sich die Abstammungslinie von A nach unten direkt zu B verfolgen lässt. Für das Element p sind sowohl body als auch html Vorfahrenelemente.
  • Nachkommenelement: Ein Element A ist Nachkommenelement eines Elements B, wenn B in direkter Linie von A abstammt. Für das Element html sind die Elemente head und title sowie body und p Nachkommenelemente.
  • Stammelement oder Wurzelelement: Ein Element A ist Stammelement eines Dokuments, wenn es nur Nachkommen-, aber keine Vorfahrenelemente besitzt. Das Stammelement jedes XHTML-Dokuments ist das Element html.

Die Bestandteile eines Dokumentstammbaums werden Knoten genannt. Alle bisher vorgestellten Knoten sind Elementknoten, das heißt, der Knoten entspricht einem bestimmten Element beziehungsweise einem Element und dessen Nachkommen. Es gibt jedoch noch weitere Knoten: Attributknoten, Textknoten und Namensraumknoten. Abbildung 4.5 ergänzt Abbildung 4.4 entsprechend. Die Textknoten, die lediglich ein \n enthalten, sind Zeilenumbrüche. Zwei Zeilenumbrüche (\n \n) ergeben eine Leerzeile.


Abb. 4.5: Das DOM des XHTML-Grundgerüsts, ergänzt um Attribut-, Text- und Namensraumnoten