Document Object Model
Das Document Object Model (DOM) bildet alle Strukturknoten eines Dokuments in einer Baumstruktur ab, um eine weitere elektronische Verarbeitung des Dokuments und dessen Daten zu ermöglichen. In aller Regel handelt es sich hierbei um ein HTML- oder XML-Dokument.
Elementknoten
Im Folgenden soll ein HTML-Dokument den Aufbau eines DOM-Baums verdeutlichen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine Seite</title>
</head>
<body>
<div>
<p>Ein kleiner Beispieltext.</p>
</div>
</body>
</html>
Diese verschachtelte Dokumentenstruktur lässt sich in einem DOM-Baum abbilden:
#document
html
head
title
#text
body
div
p
#text
Zu sehen ist: Jedes Element wird seiner Verschachtelung nach in den DOM-Baum
eingegliedert. Der oberste Knoten ist der Dokumentenknoten. Ihn gibt es nur ein
einziges Mal. Untergeordnet folgen die einzelnen Elemente. Der Text innerhalb
eines Elements wird als #text-Knoten (#text-Node) behandelt.
#text-Knoten, weshalb es oft zu
unerwarteten Skript-Fehlern kommt. Dieses Verhalten ist laut W3C-Standard
allerdings nicht korrekt. Eine mögliche Lösung dieses Problems gibt es im Mozilla Developer
Center.
Attributknoten
Nicht nur Elemente stellen Knoten im DOM-Baum dar, auch Attribute tun dies.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meine Seite</title>
</head>
<body>
<div id="wrapper">
<p class="big-paragraph">Ein kleiner Beispieltext.</p>
</div>
</body>
</html>
Der DOM-Baum sieht diesmal so aus:
#document
html
head
title
#text
body
div [id="wrapper"]
p [class="big-paragraph"]
#text
Verarbeitung des DOM-Baums
Der Zweck des Document Object Models ist die maschinelle Verarbeitung des dargestellten Dokuments. Deshalb bieten viele Programmiersprachen (nativ oder als Erweiterung) Methoden zur Verarbeitung der im DOM gespeicherten Daten an. Im Beispiel dient JavaScript als Verarbeitungssprache, welche ausgezeichnete Methoden zur DOM-Verarbeitung bietet.
Zunächst wird das <div>-Element anhand seiner ID selektiert. Hierzu dient die
Methode getElementById().
var div = document.getElementById('wrapper');
Das Objekt document stellt dabei den #document-Knoten dar. Unterhalb dieses
Knotens wird dann ein bestimmtes Element anhand seiner id identifiziert und
selektiert. Die Variable div enthält nun eine Referenz auf das
<div>-Element.
Jetzt wird das erste Kindelement, also das erste Element unterhalb von <div>,
selektiert. Um dies zu bewerkstelligen, wird auf das Array childNodes
zurückgegriffen, welches alle direkten Nachfahren von <div> referenziert.
Alternativ kann auch die Eigenschaft firstChild genutzt werden.
var div = document.getElementById('wrapper'),
p = div.childNodes[0];
// alternativ:
// p = div.firstChild;
Von diesem Element soll nun das Attribut class sowie dessen Kindelement
abgefragt werden. Um Attribute zu erfragen dient die Methode getAttribute()
(analog setzt setAttribute() einen Attributknoten).
var div = document.getElementById('wrapper'),
p = div.childNodes[0],
classAtt = p.getAttribute('class'),
txt = p.childNodes[0];
ClassAtt bekommt in diesem Skript den Wert des Attributs class des
<p>-Elements zugewiesen (big-paragraph) und txt enthält den Textknoten,
der Kind von <p> ist. Sein Inhalt kann mit der Eigenschaft nodeValue
abgefragt werden:
var div = document.getElementById('wrapper'),
p = div.childNodes[0],
classAtt = p.getAttribute('class'),
txt = p.childNodes[0],
txtValue = txt.nodeValue;
Weiterführende Links
Dieser Beitrag wird zur Zeit diskutiert und wurde zuletzt von mermshaus verändert.
Beiträge die zur Diskussion gestellt werden, enthalten mitunter Informationen bei denen wir uns noch bezüglich der finalen Darstellung absprechen müssen. Gedulde dich etwas, wir stellen diesen Beitrag fertig, sobald die Diskussion beendet ist.