Meldung

17.08.2007 - Das JavaScript Document Object Model (DOM)

Das JavaScript Document Object Model (DOM) wurde ab 1998 vom W3C als Standard für den Zugriff auf die HTML-Elemente eines HTML-Dokuments festgelegt. Mit Hilfe dieser API ist es möglich, auf Struktur, Layout und Inhalt von HTML-Dokumenten zuzugreifen – es kann jedes JavaScript/DOM Element individuell angesprochen und angepasst werden. Somit ist das clientseitige Erstellen dynamischer Internetseiten (DHTML abk. für dynamic HTML - Kombination aus JavaScript/DOM HTML) mit der Kombination aus HTML und JavaScript realisierbar (s. a. JavaScript in HTML einbauen). Bei DOM werden die einzelnen HTML-Elemente eines HTML-Dokuments in einem Baum hierarchisch nach der im Dokument festgelegten Verschachtelung angeordnet. Jedes HTML-Tag einer HTML-Datei entspricht dabei einem Knoten im Dokumentenbaum. Aber auch bei XML-Dokumenten ist das DOM anwendbar.

Die beiden vordefinierten JavaScript-Objekte Document und Node bieten einige wichtige Methoden, die für den Zugriff auf Elementknoten benötigt werden. Von herausragender Bedeutung sind die Methoden getElementById, getElementsByName und getElementsByTagName, die verwendet werden, um einzelne Elemente aus dem Dokumentenbaum zu extrahieren. Dabei liefern letzere statt eines einzelnen Elementknotens Arrays, welche die entsprechenden Knoten enthalten. Auch existieren in der DOM-API Methoden, mit denen HTML-Elemente und Textknoten erzeugt (über createElement bzw. createTextNode) oder gelöscht werden können. Änderungen im HTML-Elementenbaum werden umgehend durch den Webbrowser gerendert und entsprechend dargestellt.

Mit dem Style-Objekt gibt es ein JavaScript-Objekt, welches den Zugriff auf CSS-Eigenschaften einzelner HTML-Elemente ermöglicht. Diese Objekt kann zur Anpassung des Layouts genutzt werden und liegt unterhalb eines jeden HTML-Elementknotens. Attribute der HTML-Elemente können mit den Methoden getAttribute (lesend) und setAttribute (für den schreibenden Zugriff) angesprochen werden.

Neben dem Zugriff auf die Elemente des HTML-Dokuments wurde im Zuge der Entwicklung von DOM auch das Event-Handling eingeführt. Events wurden eingeführt, damit scriptgesteuert auf Benutzerereignisse reagiert werden kann. Einige Events, wie das Event onLoad und das onClick-Event werden im Beispielbereich näher beschrieben.

In einem Beispiel werden Funktionen definiert, welche verschiedene Operationen im HTML-Elementenbaum demonstrieren. Seit einiger Zeit gewinnt das DOM zunehmend an Bedeutung, da Dienste des Web 2.0, welche Ajax verwenden, immer größere Verbreitung finden. Die verbreiteten Ajax-Frameworks nutzen das DOM, um auf die Elemente eines HTML-Dokuments zuzugreifen.

Alexander Müller