Das Dokument Objektmodell besitzt eine Baumstruktur.
Beispiel: HTML-Tabelle [ Quelle:Wikipedia]
<table> <thead> <tr> <th>Vorname</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Donald</td> <td>Duck</td> </tr> </tbody> </table>
| Modul | Funktionsumfang |
| Core | Erzeugung und Zugriff (lesend/schreibend) auf Objekte eines XML Dokuments. |
| HTML | Spezielle Schnittstelle für HTML-Dokumente |
| Views | Verschiedene Darstellungen eines Dokuments |
| Style and CSS | Informationen einer Stylesheet / CSS-Beschreibung |
| Load and Save | Laden und Speichern von Dokument(en) bzw. -teilen, sowie deren Transport mittels HTTP |
| Events | Behandlung von Ereignissen. |
| - UIEvents | Ereignisbehandlung der Benutzerschnittstelle (UI) |
| - MouseEvents | Ereignisbehandlung des Zeigegeräts (pointing device). |
| - MutationEvents | Ereignisbehandlung bei Änderung von Dokumentinhalt bzw. -struktur. |
Siehe Document Object Model (DOM) Level 2 Core Specification.
Alle Node-Objekte eines XML Dokuments sind Kind-Objekte des äußeren Dokument Objekts und besitzen alle einen Verweis (ownerDocument) auf Jenes.
| Property/Method | Data Type | Funktionalität |
| documentElement | Element | Das äußere (Wurzel-)Element |
| createElement(tagName) | Element | Erzeugt ein Element Objekt (factory method). |
| createTextNode(text) | Text | Erzeugt ein Text Objekt. |
| createAttribute(name) | Attr | Erzeugt ein Attribute Objekt mit dem Name name. Der Attributwert muss nachfolgend separat gesetzt werden. |
| getElementsByTagName(tagName) | Array | Sucht alle Elemente mit dem Elementnamen tagName und liefert diese in einer Liste zurück. Wird als Elementname "*" übergeben, erhält man alle Elemente. |
| getElementById(id) | Element | Sucht das Element mit dem angegebenen eindeutigen id-Attribut und liefert es zurück. Im Fehlerfalle erhalten wir null. |
Jeder Knoten im Objektbaum implementiert eine gemeinsame Menge von Eigenschaften und Methoden. Diese bilden gleichzeitig das Interface des Node-Objekts.
| Property/Method | Data Type | Funktionalität |
| ownerDocument | Document | Dokument Objekt des Knotens |
| nodeName | String | Name von Element oder Attribut |
| nodeValue | String | Wert eines Attributes |
| nodeType | Number | ELEMENT_NODE (1) ATTRIBUTE_NODE (2) TEXT_NODE (3) DOCUMENT_NODE (8) etc. |
| parentNode | Node | Elternknoten |
| firstChild | Node | erster Kindknoten |
| lastChild | Node | letzter Kindknoten |
| childNodes | Array | alle Kindknoten |
| nextSibling | Node | nächster Geschwisterknoten |
| previousSibling | Node | vorheriger Geschwisterknoten |
| attributes | Array | Liste aller Attribute (nur Element Objekte) |
| appendChild(newNode) | Node | Setzt einen neuen Kindknoten newNode ans Ende der Liste. |
| insertBefore(newNode,node) | Node | Fügt einen neuen Kindknoten newNode vor dem existierenden Knoten node der Liste ein. |
| removeChild(node) | Node | Entfernt den Knoten node aus der Liste. |
| replaceChild(newNode,node) | Node | Ersetzt den Knoten node der Liste durch den neuen Kindknoten newNode. |
Element Objekte sind die am häufigsten benötigten Nodes während des Arbeitens mit dem DOM.
| Property/Method | Data Type | Funktionalität |
| tagName | String | Elementname |
| hasAttribute(name) | Boolean | Gibt die Existenz von Elementattributen an. |
| getAttribute(name) | String | Liefert den Wert des Attributs mit dem Namen name. |
| setAttribute(name,value) | - | Setzt den Wert des Attributes mit dem Namen name auf den Wert value. |
| removeAttribute(name) | - | Entfernt das Attribut mit dem Namen name aus der Attributliste des Elements. |
| getElementsByTagName(tagName) | Array | Sucht alle Kindelemente mit dem Elementnamen tagName und liefert diese in einer Liste zurück. Wird als Elementname "*" übergeben, erhält man alle Kindelemente. |
| innerHTML | String | Enthält den Auszeichnungstext aller Kindknoten (Markup). Kann sowohl gelesen als auch geschrieben werden. Diese Eigenschaft ist nicht innerhalb des W3C DOM Standards definiert. Sie wurde jedoch allgemein als sehr nützlich empfunden und wird mittlerweile von nahezu allen Browserherstellern implementiert. |
Das window Objekt wird von allen Browsern (auch Plugins) implementiert. Es ist jedoch kein W3C DOM Objekt. Eine Übernahme ins W3C DOM wird gegenwärtig diskutiert.
| Property/Method | Data Type | Funktionalität |
| document | Document | Das zugehörige document Objekt. |
| name | String | Name des Window Objekts. |
| status | String | Text der Statusleiste. |
| alert(text) | String | Erzeugt ein Meldungsfenster mit dem Text text. |
| confirm(text) | String | Erzeugt ein Bestätigungsfenster mit dem Text text. |
| prompt(text) | String | Erzeugt ein Texteingabefenster mit dem Meldungstext text. |
| setInterval(func,delay) setTimeout(code|func,delay) | - | Führt eine Function func oder ein Codestück code jeweils nach einer Verweilzeit delay periodisch aus. |
Ein zuverlässiges Arbeiten mit DOM Methoden ist nur dann gegeben, wenn das betreffende HTML– oder XML–Dokument vollständig geladen ist.
Im nachfolgenden Beispiel werden die ersten beiden script Elemente vor dem h1 Element beim Seitenaufbau durch den Parser erzeugt.
Das h1 Element, auf welches diese Bezug nehmen, ist noch nicht vorhanden und führt zu einer Fehlfunktion.
Erst im dritten script Element kann auf das voranstehende h1 Element ggfs. zugegriffen werden.
<html> <head> <title> DOM Access </title> <script type="text/javascript"> alert("found(1): " + document.getElementById("header")); </script> </head> <body> <script type="text/javascript"> alert("found(2): " + document.getElementById("header")); </script> <h1 id="header">DOM Access</h1> <script type="text/javascript"> alert("found(3): " + document.getElementById("header")); </script> </body> </html>
DOM Methoden sollten grundsätzlich nur nach dem vollständigen Laden eines Dokuments erfolgen. Hierzu bietet sich der
onloadEvent-Handler an.
<html> <head> <title> DOM Access </title> <script type="text/javascript"> function init() { alert("found: " + document.getElementById("header")); } // window.onload = init; </script> </head> <body onload="init();"> <h1 id="header">DOM Access</h1> </body> </html>
Die CSS–Eigenschaften können mittels DOM über das style–Attribut, gefolgt von der Eigenschaftsbezeichnung, gelesen und geschrieben werden.
Da die CSS–Eigenschaftsbezeichnungen (z.B. border-top-color) jedoch nicht den Anforderungen für Javascript Variablennamen entsprechen (Bindestrich ist nicht erlaubt), gilt folgende Transformation:
Aus border-top-color wird also borderTopColor.
<html> <head> <title> CSS Access </title> <script type="text/javascript"> function init(x) { document.getElementById("header").style.backgroundColor = "green"; } window.onload = init; </script> </head> <body> <h1 id="header" style="background-color:"red">CSS Access</h1> </body> </html>
<html> <head> <title> DOM Navigation </title> </head> <body> <h2>DOM Test</h2> <ul compact="true"> <li id="one">eins</li> <li id="two">eins</li> <li id="three">eins</li> </ul> </body> </html>
var node = document; window.alert(node.nodeName); node = node.firstChild; window.alert(node.nodeName); window.alert(node.childNodes.length); node = node.lastChild; window.alert(node.nodeName); node = node.firstChild; window.alert(node.nodeName); node = node.nextSibling; window.alert(node.nodeName); node = node.nextSibling; window.alert("\"" + node.data + "\""); node = node.nextSibling; window.alert(node.nodeName); window.alert(node.childNodes.length); window.alert(node.hasAttributes()); window.alert(node.getAttribute("compact")); node = document.getElementById("one"); window.alert(node.nodeName); window.alert(node.getAttribute("id")); node = node.parentNode.parentNode; window.alert(node.nodeName); var nodes = node.getElementsByTagName("li"); window.alert(nodes.length);
[ Ausführen]
<html> <head> <title> DOM Modifikation </title> </head> <body> <h2>DOM Test</h2> <ul compact="true" style="color:blue;border-style:dotted;"> <li id="one">eins</li> <li id="two">eins</li> <li id="three">eins</li> </ul> </body> </html>
var h2 = document.getElementsByTagName("h2")[0]; window.alert(h2.nodeName); h2.firstChild.data = "DOM Modification Test"; window.alert(h2.firstChild.data); h2.innerHTML = "DOM <i>Modification</i> Test"; window.alert(document.getElementsByTagName("i").length); var node = h2; while ((node = node.nextSibling).nodeType != 1) ; // goto next element .. window.alert(node.nodeName); node.style.color = "red"; window.alert(node.style.color); node.style.borderStyle = "dashed"; window.alert(node.style.borderStyle); for (node=node.firstChild; node.nodeType != 1; node = node.nextSibling) ; node.setAttribute("id", "four"); window.alert(document.documentElement.innerHTML);
[ Ausführen]
<html> <head> <title> DOM Modifikation </title> </head> <body> <h2>DOM Test</h2> <ul compact="true" style="color:blue;border-style:dotted;"> <li id="one">eins</li> <li id="two">eins</li> <li id="three">eins</li> </ul> </body> </html>
var header = document.getElementsByTagName("h2")[0], body = header.parentNode; window.alert("los ..."); body.removeChild(header); window.alert("huch ..."); header = document.createElement("h1"); header.setAttribute("title", "neue Überschrift"); header.appendChild(document.createTextNode("Grosser DOM Test")); body.insertBefore(header, body.firstChild); window.alert(body.firstChild.nodeName); var node = document.getElementById("two"); window.alert(node.innerHTML); node.removeAttribute("id"); window.alert(node.parentNode.innerHTML);
[ Ausführen]
