Weiterbildung > Dynamische Webseiten > Das Document Object Model (DOM)

Das Document Object Model (DOM)

Eine Besonderheit von Javascript sind bereitgestellte Objekte zum Zugriff auf die Elemente eines HTML-Dokuments. Am Einfachsten kann auf HTML-Elemente zugegriffen werden, wenn diese mit einem id Attribut versehen werden. Zum Beispiel kann auf eine wie folgt definierte ungeordnete Liste

<ul id="list"></ul>

in Javascript durch den Methodenaufruf

var list = document.getElementById("list");

zugegriffen werden. Das Ergebnis dieses Aufrufs ist ein Javascript-Objekt, das verwendet werden kann, um auf Eigenschaften der Liste zuzugreifen oder um diese zu manipulieren. Zum Beispiel können wir der Liste neue Items hinzufügen, wie wir später sehen werden.

Um mit Javascript auf die Elemente eines Dokumentes zugreifen zu können, darf das Programm erst aufgerufen werden, wenn die Seite komplett geladen ist. Dies können wir durch einen Eventhandler erreichen, den wir dem body Tag wie folgt zuordnen können.

<body onload="processForm();">
    ...
</body>

Falls eine Javascript-Funktion processForm definiert ist, wird diese aufgerufen, nachdem das Dokument geladen wurde.

Eine solche Funktion können wir wie folgt definieren.

function processForm() {
    var query = window.location.search;
    if (query != "") {
        ...
    }
}

Hierdurch wird mit dem Schlüsselwort function eine Funktion mit dem Namen processForm ohne Argumente definiert. Im Rumpf dieser Funktion wird der Query-Parameter der URL mit Hilfe der Eigenschaft window.location.search abgefragt und in der Variablen query gespeichert. Eine bedingte Anweisung testet, ob der Query-String leer ist. Falls nicht, wird der Rumpf der bedingten Anweisung ausgeführt, in dem wir die Formulareingaben verarbeiten können.

Zur Verarbeitung der Formulareingaben benötigen wir einige Funktionen auf Zeichenketten, die wir im Folgenden exemplarisch einführen. Mit der folgenden Anweisung erzeugen wir aus dem Query-String eine Liste, die Formulareingaben enthält.

var params = query.substring(1).split("&");

Wenn zum Beispiel in der Variablen query die Zeichenkette "?message=Hallo&priority=urgent" gespeichert ist, hat die Liste params nach dieser Anweisung den Wert ["message=Hallo", "priority=urgent"].

Wir verwenden hier die Methode substring, die einen Teilstring ab der gegebenen Position selektiert. Da das erste Zeichen ? an Position Null steht, wird es durch diesen Aufruf abgeschnitten. Die Methode split zerlegt einen String anhand des gegebenen Trennzeichens, hier "&". Als Ergebnis wird eine Liste der Teilstrings zurückgegeben, die zwischen den Trennzeichen stehen.

Wir können nun die Liste params in einer Schleife durchlaufen und in jedem Schritt dem in der Variablen list gespeicherten HTML-Element ein Item hinzufügen.

for (var i = 0; i < params.length; i = i+1) {
    var item = document.createElement("li");
    var text = document.createTextNode(params[i]);

    item.appendChild(text);
    list.appendChild(item);
}

Hier verwenden wir eine for-Schleife, die sich deutlich von einer Zählschleife in Python unterscheidet. Der Kopf der for-Schleife definiert eine Variable i, die alle Indizes der Liste params durchläuft. Die beiden ersten Zeilen des Schleifenrumpfes verwenden Methoden zum Erzeugen von HTML-Elementen und Text-Knoten. In der Variablen item wird ein neu erzeugtes li Element gespeichert, die Variable text speichert einen neuen Text-Knoten mit dem aktuellen Name-Wert-Paar der Formulareingabe.

Die beiden letzten Zeilen des Schleifenrumpfes verwenden die Methode appendChild, um das neu erzeugte List-Item der in der Variablen list gespeicherten Liste hinzuzufügen.

Wenn wir nach Definition der Funktion processForm das definierte Formular ausfüllen und absenden werden daraufhin der in der selben Seite enthaltenen Liste die Formulareingaben hinzugefügt.