DOM (Document Object Model)

Das Document Object Model (DOM) ist eine Spezifikation einer Schnittstelle für den Zugriff auf HTML- oder XML-Dokumente. Sie wird vom World Wide Web Consortium definiert. Eine Implementierung, die dieser Spezifikation genügt, besteht im Sinne der objektorientierten Programmierung aus einem Satz von Klassen zusammen mit deren Methoden und Attributen. Sie erlaubt Computerprogrammen, dynamisch den Inhalt, die Struktur und das Layout eines Dokuments zu verändern.

Kunden stellt einen Knoten (node) dar, PrivatKunden und Geschäftskunden sind seine Kinder (childNodes), wobei Privatkunden das erste Kind (firstChild) ist und Geschäftskunden das letzte (lastChild).

Privatkunden wiederum hat zwei Kinder (Kunde[0] = firstChild und Kunde[1] = lastChild), die ihrerseits Geschwisterknoten darstellen (childNodes). Jeder Knoten mit Ausnahme des Wurzel-Knotens besitzt einen ihm übergeordneten Eltern-Knoten (parentNode) usw.

Weiters gibt es noch Attribute (attributes), so ist nr ein Attribut (eine Eigenschaft) von Kunde.

Knotenbeziehungen
<Kunden>
 <PrivatKunden>
  <Kunde nr="1">
    <Name>Max Mustermann</Name>
  </Kunde>
  <Kunde nr="2">
    <Name>Martina Mustermann</Name>
  </Kunde>
 </PrivatKunden>
 <GeschaeftsKunden>
  <Kunde nr="3">
    <Name>Jane Doe</Name>
  </Kunde>
 </GeschaeftsKunden>
</Kunden>

Grundlagen des DOM anhand eines weiteren Beispiels

Beispiel XML-Baumstruktur

    function run() {
	var dokument = null;
	var ausgabe = "";
	var xmlString = document.getElementById("xml").value;
	xmlString = xmlString.replace(/>(\s)+</g,"><");
	dokument = dom.documentFromString(xmlString);

	// getElementsByTagName (im gesamten Baum)
        var namen = dokument.documentElement.getElementsByTagName("Name");
		ausgabe += namen.length + " Name(n) gefunden<br />";

		for (var i=0; i<namen.length; i++){
			var element = namen[i];
			ausgabe += element.firstChild.nodeValue + "<br />";
        }

        // getElementsByTagName (in einem Teilbaum)
        var privatKunden = dokument.getElementsByTagName("PrivatKunden")[0];
        var namen = privatKunden.getElementsByTagName("Name");
        for (var i=0; i<namen.length; i++){
			var element = namen[i];
			ausgabe += element.firstChild.nodeValue + "<br />";
			ausgabe += traverseDocument(dokument.documentElement, true);
        }
		document.getElementById("output").innerHTML = ausgabe;
	}
	
	function runAttribute() {
			var dokument = null;
			var ausgabe = "";
			var xmlString = document.getElementById("xml").value;
			xmlString = xmlString.replace(/>(\s)+</g,"<>");
			dokument = dom.documentFromString(xmlString);

			var eingabe = document.getElementsByName("box")[0].value;
			var att = document.getElementsByName("box")[1].value;
			var knoten = dokument.getElementsByTagName(eingabe);
			ausgabe += knoten.length + " Knoten gefunden<br />";

			for (var i=0; i<knoten.length; i++){
                 var el = knoten[i].getAttribute(att);
                 ausgabe +=  el +"<br />";
            }
			document.getElementById("output").innerHTML = ausgabe;
		}

        // Funktion zum Traversieren eines DOM-Baumes
        function traverseDocument(node, start) {
			var color = "#000";
			if (node.nodeType == 3) {
				color = "#00F";
			}
			var traversal = '<li style="color: ' + color + '">' + node.nodeName;
			var children = '';
			for (var i = 0; i < node.childNodes.length; i++) {
				children += traverseDocument(node.childNodes[i], false);
			}
			if (children.length > 0) {
				traversal += '<ul>' + children + '</ul>';
			}
			traversal += '</li>';
			if (start) {
				traversal = '<ul>' + traversal + '</ul>';
			}
			//document.getElementById("output").innerHTML = ausgabe;
			return traversal;
		}