DOM

Das Document Object Model

Das Document Object Model (DOM) ist ein Standard, welcher den Zugriff auf strukturierte Daten regelt.

Ein DOM-Objekt ist in Form eines 'Hierarchischen Baumes' organisiert, der sich ausgehend von der Wurzel beliebig verzweigt.

XML	Extended Markup Language
DOM-Geschichte	Die historischen Wurzeln des DOM
DOM-Level	Das DOM wird schrittweise in "Ebenen" definiert
Kurz-Demo	Live-Demo der DOM-Grundelemente
Definition	Umfang der DOM-Definition: Objekte, Eigenschaften, Methoden, Ereignisse
DOM-Javascript	Zugriff auf den DOM-Objektbaum mit Javascript / ECMAScript
DOM-CSS	Zugriff auf den DOM-Objektbaum mit CSS
Links	Ausgewählte Links zum Thema 'DOM'

Die (kurze) Geschichte des DOM
Das "Document Object Model" (DOM) des W3C ist ein Standard, welcher Programmen den Zugriff auf Inhalt, Struktur und Layout von Dokumenten ermöglicht. Das DOM ist lizenzfrei sowie unabhängig von Betriebssystemen und Programmiersprachen. Das DOM erlaubt insbesondere dynamischen Zugriff, d.h. Zugriff auf bereits bestehende Dokumente.
Der historische Auslöser für die Definition des DOM durch das W3C war die explosionsartige und wenig koordinierte Entwicklung des Internet.	Unter den vielen neuen Möglichkeiten und Fähigkeiten der neuen Browser war auch das "Dynamische Verhalten": Damit war die spätere Veränderung einer bereits geladenen Webseite gemeint.
Das erste "Dynamische Modell" brachte Netscape mit seinem Browser Navigator 2 (1996-03) heraus: Er unterstützte als erster eine eigene Programmiersprache - Javascript 1.0 - welche auf die Objekte einer Webseite zugreifen und sie dynamisch verändern konnte.	Microsoft versuchte mit seinem Browser M$IE 3 (1996-08), den Navigator einigermaßen kompatibel "nachzubauen", was aber in einem fehlerhaften Fiasko endete.
Netscape machte den Fehler, sein Modell nicht öffentlich zu spezifizieren und nötigte dadurch M$ indirekt zur Entwicklung eines eigenen Modells. Navigator 3 (1996-08) und 4 (1997-06) brachten zwar Neuheiten, führten jedoch das etwas zu bescheiden angedachte Netscape-Modell weiter.	M$IE 4 (1997-10) war nicht mehr ein Nachbau, sondern eine komplette Neuentwicklung ohne Rücksicht auf Rückwärts-Komtabilität - eine Chance, die M$ seither nie wieder wahrgenommen hat. M$IE 4 war durch sein konsequentes Konzept dem Navigator 4 weit überlegen.
Immer mehr Webseiten boten "dynamische" Efferkte, d.h. programmierte Änderungen von Inhalt und Aussehen. Zu diesem Zeitpunkt war es wegen der ähnlichen Marktanteile von M$IE und Navigator für EntwicklerInnen unumgänglich, beide Modellversionen zu unterstützen. Es wurde immer teurer und aufwändiger, beide Browser dynamisch zu unterstützen. Das erhöhte den Druck, ein einheitliches Modell einzuführen.	M$ hatte zu diesem Zeitpunkt noch nicht die Macht, seine Vorstellungen am Markt rücksichtslos durchzusetzen. Daher gelang es der unabhängigen Organisation World Wide Web Consortium (W3C), DOM als Standard zu entwickeln, der heute allgemein anerkannt, und weitgehend, wenn auch noch nicht vollständig umgesetzt ist.
Das DOM-Modell des W3C war konsequenter und radikaler als die Modelle von Netscape und M$, übernahm jedoch mehr Ideen vom M$IE als vom Navigator. M$ konnte seine Browser geradlinig weiterentwickeln: M$IE 5 (1999-03) war der erste halbwegs DOM-fähige Browser, M$IE 6 (2001-10) bot recht gute DOM-Technik. In schlechter Tradition schleppt jedoch M$ noch immer sein überholtes Modell (DHTML) mit und versucht es bei den zahlreichen Doppelgleisigkeiten sogar noch zu bevorzugen. Javascript unterstützt das DOM ab Version 1.5	Netscapes Modell erwies sich als Sackgasse. Die Browser-Entwicklung wurde in die OpenSource-Organisation Mozilla ausgelagert, die einen völlig neuen Browser-Engine (Gecko) entwickelte. Navigator 6 (2000-11) war der erste damit "angetriebene" Browser von Netscape, der sich konsequent auf das DOM konzentrierte und das alte Netscape-Modell ignorierte. Navigator 7 (2002-08) bot ausgezeichnete DOM-Unterstützung. Mozilla bietet selbst die Browser Mozilla und Firefox lizenzfrei an. Auch der Browser Camino für Apple-Systeme verwendet Mozilla / Gecko. Der Firefox Browser holt vor allem seit Version 2 immer mehr Markt-Anteile und hält derzeit in Europa bei 20-30%. Das Mozilla Projekt ist ein integriertes Internet-Paket aus Browser (wie Firefox), Mail (wie ThunderBird) und Web-Editor (wie NVue), das sich langsamer entwickelt, aber in Zukunft interessant werden kann.
Auf Win-Systemen dominiert heute M$IE nahezu unangefochten. Dieser Browser wurde auch auf das Apple-Betriebssystem portiert, teilweise mit abweichenden Eigenschaften. Der Browser-Markt könnte wieder interessant werden, wenn M$ tatsächlich Geld für seinen M$IE verlangen will. Opera startete 1995 in Norwegen ein ambitioniertes Browser-Unternehmen. Der Browser ist heute schlank und sehr schnell, die DOM-Unterstützung fast so gut wie bei Firefox.	Auf Linux-Systemen arbeiten alle Gecko-Browser (Firefox, Mozilla) jedoch nicht M$IE. Auf Linux ist das Desktop-Programm wählbar (Gnome, KDE, ...). Zusammen mit dem KDE Desktop wird meist auch das Programm Konqueror eingesetzt, eine ausgezeichnete Integration von Browser und Datei-Manager. Apple verwendet den gleichen engine für seinen erstklassigen Browser Safari. Das DOM scheint weitgehend, jedoch nicht vollständig unterstützt.
Mit Definition des DOM wurde jedoch nicht nur der Browser-Streit beendet. Es wurde ein Standard geschaffen, der wesentlich über HTML hinausgeht.	DOM ist heute ein allgemein anwendbares Interface für jede Art von strukturierten Daten, insbesondere XML, darunter auch HTML und XHTML. Das DOM hat nicht mehr nur mit Browsern zu tun: Es wird von allen modernen Programmiersprachen unterstützt.
In diesem Web werden anerkannte Standards unterstützt, wo immer das möglich ist. Ausnahmen gibt es nur dort, wo die Standards noch nicht voll implementiert sind, oder andere wichtige Gründe vorliegen.	Leider finden sich noch immer gutgemeinte Ratschläge, lediglich die Technik des (momentanen) Marktführers zu unterstützen, oder gar neben dem DOM auch noch die Auslaufmodelle von M$ und Netscape. - Kein guter Rat. Mit DOM-Technik erstellte Webseiten werden von allen gängigen Browsern auf allen Betriebssystemen sauber dargestellt. Der Anteil von Uralt-Browsern, die solche Webseiten nicht anzeigen kann, liegt unter der Wahrnehmungs-Grenze.
Links: Blooberry: browser history

Die DOM-Level
Das DOM-Modell des W3C hat sich weiterentwickelt, und wird sich den Anforderungen zukünftiger Systeme durch weitere Definitionen anpassen. Die einzelnen Ebenen (Level) ergänzen die Basis-Ebene "Core-DOM"
Level 1 Core DOM 1998-10	Definition und Kombination der Objekte, Adressierung der Objekte, Manipulation der Objekte. Core DOM definiert einen Satz allgemeiner Objekte, mit welchen sich jedes strukturierte Dokument darstellen lässt. Core DOM wird heute von jedem Standard-Browser (fast) vollständig unterstützt. Javascript unterstützt das DOM ab Version 1.5
Level 2 CSS (Level 1 und 2) Events XML-namespaces 2000-11	Ergänzt DOM mit dem CSS-Stylesheet-Modell (ebenfalls W3C) und der dafür benötigten Methoden für den Zugriff auf style-Daten und die Objekte styleSheet und style. Ein Event-Modell wird ergänzt: Generic (Grundlagen), MouseEvents, MutationEvents, HTMLEvents XML-namespaces werden unterstützt. Erweiterung im Jahr 2003: Details zu HTML 4.0 und XHTML DOM Level 2 wird von den gängigen Browsern weitgehend, jedoch unterschiedlich unterstützt. M$IE bevorzugt häufig eigene non-Standard Erfindungen, kann aber fast immer ausgetrickst werden.
Level 3: Dateien DTD Keyboard-Events 2004-04	Methoden zur Manipulation von Dateien Allgemeine Datenmodelle (XML-DTD's) unterstützen. Die Events werden um Tastatur-Events ergänzt.
Weitere zukünftige Levels:	Die Diskussion wird bereits geführt, ist beim W3C zu finden.

Kurze DOM-Demo
DOM ist keine Programmiersprache ! - DOM ist ein Standard für den Zugriff auf Elemente eines Dokuments in einer "Auszeichnungs-Sprache" (z.B. XML, HTML, SVG, ...). Dieser Standard wird von allen modernen Programmiersprachen unterstützt, darunter auch von Java und Javascript. Wichtige Begriffe: document, node, childNode, parentNode, textNode, attributeNode, ... Beim Überfahren von Knoten mit der Maus werden diese markiert (natürlich mit DOM-Methoden).
Jeder DOM-Baum beginnt mit genau einem Wurzel-Element root Dieses Objekt hat kaum praktische Bedeutung. Es enthält genau ein Dokument-Objekt. Das Objekt "Document" (document) bildet dem "Stamm" des Objektbaums (tree). Es ist genau einmal vorhanden und enthält alle weiteren Objekte. Das document-Objekt enthält beliebig viele untergeordnete Objekte namens "Knoten" ( nodes ). Jedes HTML-(XML)-tag bildet einen node, der vom Anfang bis zum Ende des tags reicht, z.B. <html> ... </html> Jeder node kann selbst beliebig viele weitere untergeordnete Knoten ( childNodes ) enthalten In diesem Beispiel enthält der <html>-node zwei childNodes <head> und <body> Umgekehrt hat jedes Objekt außer document genau einen "Elternknoten" ( parentNode )	HTML-Beispiel: <html> <head> <title>Das ist der Titel</title> </head> <body> Der erste Text <br> Text Nr. 2 <div style="color:red">Neue Zeile</div> Schluss </body> </html>
Am Ende der Hierarchie stehen beliebig viele "Blätter" des Baumes. Sie bestehen aus Text ( #text, textNodes ) und können keine weiteren childNodes enthalten. Ein Endpunkt kann jedoch auch aus einem node bestehen, der keine weiteren childNodes enthält (z.B. das <br>-Element )	In diesem Beispiel enthält der <body>-node 5 childNodes #text, <br>, #text, <div>, #text wobei <div> selbst wieder einen #text - childNode hat.
Jeder node kann beliebig viele Attribute (attributNodes ) enthalten. Das sind spezielle nodes, die Daten zur näheren Beschreibung ihres parentNode enthalten.	attributeNodes folgen der Syntax name="wert" und können selbst keine childNodes enthalten. Hier enthält der <div>-node ein Attribute mit name="style" und wert="color:red"
Es gibt keinen "Zwischenraum": Jeder Teil eines Dokuments gehört zu irgendeinem Knoten und kann damit adressiert, gelesen oder geändert werden.	Ein Knoten kann auch ein ganzes Dokument beherbergen. So kann z.B. das HTML-tag <object> ein fremdes Dokument (Text, HTML, XML, ...) enthalten. Dieser Fall ist derzeit selten, wird aber mit zunehmender Integration von XML an Bedeutung gewinnen.
Mit diesem einfachen Modell lassen sich alle XML-Dokumente beschreiben, sozusagen die Übermenge von HTML. Hier ein Beispiel von Objektgrafik in SVG: Das document enthält die childNodes circle und text, letzteter einen textNode. Die beiden nodes <circle> und <text> enthalten einige attributNodes, welche Position und Farbe beschreiben. Einfache tags ohne Abschlus-tag enthalten in XML ein integriertes Abschluss-Zeichen "/".	<svg> <circle cx="20" cy="20" r="15" fill="red"/> <text x="40" y="27">SVG-Demo</text> </svg> <!-- tag mit Anfang & Ende: --> <text> . . . </text> <!-- einfaches tag: "integriertes" Ende --> <circle />
Das DOM-Modell lässt sich auch auf beliebige eigene Daten anwenden, wenn diese als XML-Dokument organisiert sind: DOM-Parser sind Programme, welche einen DOM-Objektbaum "abarbeiten". Jeder Browser muss über einen Parser verfügen: Damit wird der von Webserver eintreffende HTML-Code einer Webseite analysiert, daraus wird die Webseite erstellt. Java bietet mehrere Parser, darunter auch einen DOM-Parser für die Verarbeitung von XML-Dokumenten.	<xml> <person sex="w"> <vorname>Anna</vorname> <zuname>Weber</zuname> </person> <person sex="m"> <titel>Mag.</titel> <zuname>Weber</zuname> </person> </xml>
Eine Spezialität von HTML ist das Object navigator. Es besteht unabhängig von document und ist auch nicht darin enthalten. navigator bietet (read-only)-Daten über das verwendete Browser-Programm.

Was wird durch das DOM definiert ?
Damit der DOM-Standard in der Praxis funktionieren kann, müssen einige Bereiche von der Definition erfasst werden: Das DOM definiert (derzeit) Objekte, Eigenschaften, Methoden und Ereignisse Da sich alle modernen Programmiersprachen auf das DOM stützen, ist die Syntax in verschiedenen Sprachen ganz ähnlich, d.h. sie können mit DOM-Grundkenntnissen in jeder Sprache arbeiten. Der Wirkungsbereich erstreckt sich nicht nur auf Client-Seite: Auch am Webserver können alle Programme das DOM benutzen.
Objekte (objects)	Ein Objekt ist eine Art von "Behälter" mit einer genau bestimmten Reichweite in einem Dokument. Objekte enthalten Eigenschaften und bieten Methoden zur Manipulation. Beispiel: Ein HTML-Formular (<form>) dient zur Eingabe von Daten, besitzt dafür geeignete Eigenschaften und bietet passende Methoden (z.B. submit) an. Wichtige Objekte: document, node
Eigenschaften (properties)	Das sind Daten, welche ein Objekt genauer beschreiben. Es gibt Eigenschaften, die nur lesbar sind (readonly) und solche, die sich ändern lassen. Beispiel: Schriftfarbe (color) ist eine Eigenschaft von #text-Knoten. Wichtige Eigenschaften von nodes: nodeType, nodeName, nodeValue.
Methoden (methods)	Eine Methode führt eine "Handlung" (action) aus, mit welcher auf Objekte zugegriffen wird. Methoden werden z.B. durch Anweisungen von Programmen ausgelöst. Sie können ein Ergebnis zur weiteren Verarbeitung zurückgeben. Beispiel: Das Objekt window bietet die Methode close(), mit der es durch ein Programm geschlossen werden kann. Wichtige Methoden von document Adressierung von nodes: getElementById, getElementyByName, getElementsByTagName Erzeugung neuer nodes: createElement, createAttribute, createTextNode Wichtige Methoden von node Attribute: getAttribute, getAttributeNode, setAttribute, setAttributeNode, removeAttribute, removeAttributeNode childNodes: appendChild, insertBefore, removeChild, replaceChild child-textNodes: insertData, deleteData, replaceData
Ereignisse (events)	Ereignisse sind Handlungen in Zusammenhang mit Objekten. Sie können durch die/den AnwenderIn ausgelöst werden (z.B. onclick ) oder durch Objekte des document (z.B. timeout ). Ereignisse werden von Programmteilen des Browsers (event handler) bearbeitet, welche adäquat darauf reagieren. Das DOM bietet Programmiersprachen die Möglichkeit, Ereignisse "abgefangen" ( trap, intercept ) und selbst zu bearbeiten.

References	In guten Nachschlage-Werken (references) von HTML (XML, ...) finden sie die Erklärungen zu den angeführten Themen nach diesem Schema geordnet. Im Inhaltsverzeichnis finden sie eine Liste der Objekte. Für jedes Objekt ist angeführt, über welche Eigenschaften es (immer oder optional) verfügen kann. Sie sollten erfahren, welche Werte jede Eigenschaft annehmen kann, und welchen Wert sie "von vorneherein", d.h. ohne Programmierung (default) hat. Zu jedem Objekt werden die dafür verfügbaren Methoden angeführt, zweckmäßig mit typischen Beispielen. Es gibt allgemeine Methoden, die sich auf viele . . alle Objekte anwenden lassen, sowie spezielle Methoden für einzelne Objekte. Alle für die Ausführung benötigten oder optionalen Parameter (Eingangsdaten) werden beschrieben. Die Wirkung der Methode in allen möglichen Varianten wird erklärt. Allenfalls zurückgegebene (return) Daten werden beschrieben. Die Ereignisse werden meist nicht bei den Objekten, sondern in allgemeiner Form beschrieben, da sie selten spezifisch für bestimmte Objekte sind. Zu jedem Ereignis wird beschrieben, wie es ausgelöst wird, und wie es vom event-handler des Browsers behandelt wird. Mit Programmiersprachen wie z.B. Java oder Javascript können sie selbst Objekte, Eigenschaften und Methoden definieren.

Ausgewählte Links zum Thema 'DOM'
DOM-Homepage bei W3C: DOM Level 1 Specification DOM Level 2 Core, Level 2 HTML, Level 2 Style Specification, Level 2 Events Specification	Mozilla DOM Reference Microsoft über M$IE6 und DOM Level 1 (!) .
SVG-Homepage beim W3C MathML-Homepage beim W3C	SelfHTML (de) enthält zahlreiche, jedoch verstreute Artikel & Hinweise zum DOM. - Viele gute Beispiele. XML cover pages - Umfangreiche Insider-Info
DOM-Testseite für Browser am W3C

Zum Inhaltsverzeichnis

> Entwicklung > XML