Document Object Modell

Auf dieser Seite:

Baum mit Knoten

Dokument-Objekt-Model

Das HTML-Dokument wird als ein Baum betrachtet. Will man einen Apfel pflücken, muss man sich den Ästen entlang zu ihm hin hangeln. DOM wurde nicht ausschliesslich für HTML mit seinem eingeschränkten Satz an Tags konzipiert, sondern es lässt sich auch auf XML Dokumente anwenden, bei denen die Tags nicht vorgegeben sind. Die Abstraktion baut auf Relationen auf: Elternknoten, Kindknoten, Geschwisterknoten.

Node

Jedes Element, und auch jeder Text (der in HTML 4 nicht zwingend von Tags umgeben ist), wird zu einem Knoten (engl. node) in dem Baum. Die Elemente zwischen einem öffnenden und dem dazugehörigen schließenden Tag sind Kindknoten (engl. child nodes), so dass eine Hierarchie gegeben ist. Textknoten können keine Kinder haben.

ChildNodes und Siblings

Die Kindknoten eines Elements im DOM-Baum befinden sich im Array childNodes[], sie sind alle Geschwister (siblings). Klettern kann man nun vertikal von Parent zu Child oder horizontal von Sibling zu Sibling. Wenn ich die Astgabelungen genau kenne, kann ich auch springen, z.B. zum 4. oder letzten Kind einer mir bekannten Mutter.
Und schliesslich sind HTML Blüten doch etwas so besonderes, dass sie für sich gezählt werden und ich sie quasi ohne zu Klettern, mit einem Steinwurf z.B. über den Array images[] oder forms.elements[] pflücken kann.

DOM Illustration

Skizze zu DOM

Beachten Sie, dass jeder Tag ein id-Attribut trägt, auch hiermit kann der Tag dann von JavaScript aus angesprochen werden.

Entsprechendes HTML:

<html>
 <head>
  <title>DOM-Code</title>
 </head>
 <body ID="alles">
  <h3 id="Ueberschrift">DOM-Code</h3>
  <img src="ball.gif" id="Ball1"> 
  <img src="ball.gif" id="Ball2"> 
  <img src="ball.gif" id="Ball3"> 
  <img src="ball.gif" id="Ball4">
 </body>
</html>

Knoten Tabellen

Von einem Knoten (bzw. HTML-Element) aus kann man mit den folgenden Eigenschaften auf andere Knoten zugreifen:

**Tabelle 1:** Eigenschaften eines Knotens im DOM-Baum
Eigenschaft	Beschreibung
firstChild	Der erste Kindknoten (erstes Element im child Nodes-Array)
lastChild	Der letzte Kindknoten (letztes Element im child Nodes-Array)
nextSibling	Das nächste Kind des Elternknotens
parentNode	Der Elternknoten
previousSibling	Das vorherige Kind des Elternknotens

**Tabelle 2:** Eigenschaften, die nähere Informationen über einen Knoten liefern
Eigenschaft	Beschreibung
nodeName	HTML-Tag des Knotens als Zeichenkette (z. B. "H3")
nodeType	1 = Tag, 2 = Attribut, 3 = Text
className	Name der CSS Klasse wie im StyleSheet deklariert und dem Element zugeordnet
innerHTML	einfügen von Text zwischen Tags

**Tabelle 3:** Methoden zur Veränderung des DOM-Baums
Methode	Beispiel	Beschreibung
createElement()	document.createElement(HTML-Tag)	Erzeugt einen Knoten, der aus dem in Klammern angegebenen HTML-Element (z. B. H3) besteht.
getElementById()	document.getElementById(Tag-id)	Beschafft die Referenz auf ein Element via id (Vater) Dies ist eine eindeutige Identifizierung (eindeutiger als ein Name)
getElementsByName()	document.getElementsByName("name")[0].checked = true;	Es kann mehrere Elements mit dem selben Namen haben, z.B. checkbox. Darum muss ein Element via Name immer mit dem Array-Index angesprochen werden. Achtung: hat ein Element id und name wird vom IE6 nur noch die id gefunden!
getElementsByTagName()	xmlRoot.getElementsByTagName(XMLTag)	Auch hier gibt es u.U. mehrere Elements. Beschafft die Referenz auf alle Elemente eines Tag
getSelection()	document.getSelection()	Liest selektierten Text aus
appendChild()	Vater.appendChild(Kind)	Hängt Kind als Kindknoten an Vater an.
hasChildNodes()	Knoten.hasChildNodes()	Boolescher Wert, der angibt, ob Knoten Kinder hat oder nicht.
insertBefore()	Vater.insertBefore(Kind, Schwester)	Kind wird als Kindknoten von Vater eingefügt, und zwar direkt vor Schwester.
removeNode()	Knoten.removeNode(alles)	Knoten wird aus dem DOM-Baum entfernt. Ist alles gleich true, dann werden auch alle Kindknoten von Knoten entfernt.
replaceNode()	Alt.replaceNode(mitNeu)	Der Knoten Alt wird durch den Knoten Neu ersetzt.
cloneNode()	Original.cloneNode(alles)	Erzeugt einen Knoten, der identisch zum Original ist. Ist alles gleich true, so werden auch alle Kindknoten vom Original mit dupliziert, bei false lediglich der Knoten selbst.
setAttribute()	Knoten.setAttribute(Name, Wert)	Der Knoten erhält ein neues Attribut.

Check den Code.

Variablen >> << Objekte

Ich bin hier: > JavaScript Lehrling >>> Document Object Modell