DOM: Volle Kontrolle mit Javascript

In Verbindung mit einem cleveren Konzept für den Zugriff auf alle Elemente einer HTML-Seite wird Javascript noch mächtiger. Damit werden dynamische Effekte möglich, wie etwa das Hinzufügen neuer Formularfelder bei Bedarf.

Das Grundkonzept des “Document Object Model” oder kurz DOM ist eine streng hierarchische Sicht auf die Elemente einer HTML-Seite. Diese Sichtweise entspricht der Schachtelung der HTML-Tags, die man beim Schreiben von HTML-Quellcode einhält.

Nützlich wird DOM, sobald Javascript ins Spiel kommt. Denn die DOM-Hierarchie kann genutzt werden, um Elemente auszulesen, zu verändern oder sogar neu anzulegen.

Folgende Javascript-Zeile setzt zum Beispiel die Hintergrundfarbe einer HTML-Seite auf gelb

document.body.bgColor=”yellow”

Dabei repräsentiert “document” die gesamte Seite und “bgColor” das gleichnamige Attribut, im <body>-Tag. Die Codezeile ändert also die Vorgabe durch das Attribut, falls es im <body>-Tag festgelegt wurde oder erzeugt das Tag neu, wenn es nicht vorhanden war.. Sie könnten damit beispielsweise dem Besucher die Möglichkeit anbieten, sich die Hintergrundfarbe selbst auszusuchen.

Das erste Beispiel ist simpel, da es in der ganzen DOM-Hierarchie nur ein Element “body” gibt. In der Regel wollen Sie aber Objektarten ansprechen, die mehrfach vorkommen, etwa Eingabefelder. Den Inhalt des ersten Feldes im ersten Formular erreichen Sie zum Beispiel mit folgendem Konstrukt

document.forms[0].elements[0].value

Dabei enthält document.forms ein Array aller Formulare. Hiervon wird das erste ausgewählt (in Javascript beginnen Indizes immer mit 0). “elements” wiederum enthält alle Eingabefelder des Formulars, egal ob Selectbox, einfaches Feld oder Textarea. Auch hier wählen Sie das erste Element aus. Das “value” zum Schluss enthält den Wert des Feldes. Es gibt noch andere Eigenschaften von Formularfeldern, wie etwa ihren Startwert beim Laden des Formulars oder die maximale Länge der Eingabe. Die Eigenschaften sind vom Typ des Feldes abhängig.

Beim Namen nennen

Nun wollen Sie zum Ansprechen eines bestimmten Feldes natürlich nicht mit seiner “laufenden Nummer” arbeiten. Denn dann würde jedes Löschen oder Neueintragen eines Feldes Änderungen am Programm nach sich ziehen, da sich die Indizes ändern. Besser ist es, einen aussagekräftigen Namen für ein Feld zu verwenden. Dazu müssen Sie den gewünschten Elementen mit dem HTML-Tag <name> eine Bezeichnung geben. Dann sind verständlichere Bezeichnungen möglich, wie etwa

document.forms[‘anmeldung’].elements[‘vorname’].value

Das dazugehörige Formular könnte beispielsweise so aussehen

<form name=’anmeldung’>

Vorname <input name=”vorname”>

Nachname <input name=”nachname”>

<input type=’submit’>

</form>

Ein Element per Id auswählen

Die Methode getElementById() des Objekts “document” liefert ein HTML-Element mit einer bestimmten Id. Die entspricht dem gleichnamigen Attribut, das Sie jedem HTML-Tag geben können.

Ein Beispiel: Sie haben im HTML-Code einer Seite folgenden Absatz

<p id=’hinweis’>Alles normal</p>

Mit folgendem Codeschnipsel tauschen Sie den Inhalt des Absatzes aus

var x = document.getElementById(“hinweis”);

x.innerHTML=’Neuer Inhalt!’;

Die Eigenschaft “innerHTML” eines Elements enthält den gesamten HTML-Quelltext der sich zwischen dem öffnenden und dem schließenden Tag des Elements befindet und ermöglicht seine Änderung. Die Eigenschaft innerHTML ist bei Puristen übrigens nicht beliebt, weil auch der in den Tags eingeschlossene HTML-Code per DOM erreichbar wäre. Allerdings sind die dazu notwendigen DOM-Zugriffe unnötig kompliziert, wenn man den HTML-Code nicht weiter bearbeiten will. Die Variante mit innerHTML ist dann der einfachste Weg.

Elemente per Name liefern lassen

Eine weitere Möglichkeit ein bestimmtes Objekt im aktuellen Dokument dingfest zu machen, ist die Methode getElementsByName(), die sich am Attribut “name” der verwendeten Tags orientiert. Wie man am Plural im Namen sieht, gibt diese Methode potentiell mehrere Objekte zurück. Das kommt daher, dass das Attribut “Id” immer eindeutig sein muss , ein “Name” aber öfters verwendet werden kann.

Das Ergebnis der Methode kann dann beispielsweise mit einer for-Schleife durchlaufen werden. Sind sie sich dagegen sicher, dass das Element nur einmal vorkommt, können Sie auch die Methode item() anwenden, die das n-te Element eines Arrays zurückliefert. Damit ließe sich die oben verwendete Referenz für den Wert im Feld “Vorname” auch anders ausdrücken

document.getElementsByName(‘vorname’).item(0).value

Die letzte Möglichkeit, per DOM auf Elemente zuzugreifen, ist die Methode getElementsByTagName(). Sie liefert alle HTML-Bestandteile eines bestimmten Typs zurück, etwa alle Headlines oder alle Bilder.

Das folgende Mini-Programm bringt beispielsweise eine Übersicht aller Links und Anker die auf dieser Seite auftauchen.

var arrLinks = document.getElementsByTagName(“a”);

var strMeldung = ‘Links in diesem Dokument:n’;

for (i=0;i<arrLinks.length;i++){

strMeldung += arrLinks[i].href + “n”;

};

alert(strMeldung);

Beispielprogrann JS mit DOM

Für einige der Tags liefert Javascript eine bequeme Kurzform. So sind alle Links beispielsweise mit document.links und alle Bilder mit document.images schnell ermittelbar. Der folgende Ausdruck würde beispielsweise die Anzahl der Bilder im Dokument beinhalten

document.images.length

Es gibt auch Fälle, in denen die Aneinanderreihung von get-Methoden sinnvoll ist. Wollen Sie etwa alle Eingabefelder geliefert bekommen, die innerhalb der Tabelle mit der Id “bestellung” vorkommen? Das geht so:

document.getElementById(‘bestellung’).getElementsByTagName(‘input’)

Der Ausdruck bis zum zweiten Punkt liefert die Tabelle “bestellung” . Innerhabl dieser Tabelle ermittelt der letzte Teil alle Elemente, die ein Input-Feld repräsentieren.

Neue Elemente anlegen

Über die Möglichkeiten des DOM können auch Inhalte einer HTML-Seite neu generiert werden. Das ist zwar auch über document.write() möglich, doch diese Methode fügt den HTML-Code einfach nur an der Stelle ein, wo sich der Befehl write() befindet. Über DOM dagegen können Sie genau steuern, wo neue Elemente eingebaut werden sollen.

Das Neuanlegen besteht aus drei Schritten. Zuerst generieren Sie ein neues Element eines bestimmten Typs, etwa einen Absatz. Dann ändern Sie dessen Attribute, also den Textinhalt oder seinen Namen. Zuletzt wird das neue Element in die DOM-Hierarchie eingehängt. Erst damit wird es im Browser sichtbar.

Ein praktisches Beispiel dafür ist ein Formular, mit dem man Freunden eine Benachrichtigung senden kann. Die Anzahl der Felder für die Empfänger im Formular soll dynamisch steuerbar sein: Sobald der Benutzer einen Button angeklickt, erweitert das Javascript-Programm das Formular um ein weiteres Empfängerfeld .

Dazu wird beim Klick auf den Button diese Funktion aufgerufen

function addField() {

var newField = document.createElement(‘input’);

newField.type = ‘text’;

newField.name = ’empf’

document.getElementById(‘myid’).appendChild(newField);

}

Zuerst wird also ein Input-Feld erzeugt. Das existiert zuerst nur in Javascript, ist also unsichtbar. Danach setzt die Funktion den Feldtyp und benennt das Feld mit dem Namen “empf”.

Drückt der Benutzer den Knopf zum hinzufügen neuer Felder, dann existieren mehrere gleich benannte Felder. Das könnte man mit einem einfachen Zähler umschiffen. Jedoch ist dies für die meisten Sprachen, die so ein Formular auf der Serverseite auswerten kein Problem. Schreiben Sie etwa in PHP folgenden Ausdruck für die Empfänger

$empfliste = $_POST[’empf’];

Die Variable $empfliste enthält dann ein Array , das für jedes Empfängerfeld einen Wert aufweist.

Die letzte Zeile document.getElementById(‘myid’).appendChild(newField); fügt das neue Eingabefeld an den bestehenden Inhalt des Elements mit der Id “myid” an. Die Id müssen Sie im Formular festlegen, beispielsweise über ein <span>-Tag. Das hat dann also nur den Zweck, die Einfügebereich zu markieren. Das Formular sähe dann in einer einfachen Version so aus

<form>

<span id=”felder”>

<input type=”text” name=”empf”>

</span>

<button onclick=”addField();return false;”>

Neues Feld</button>

<input type=”submit” >

</form>

Validität ist Voraussetzung

Wichtig ist, dass Sie bei der Nutzung des DOM mit validem HTML 4.0 arbeiten, also beispielsweise alle öffnenden HTML-Tags korrekt schließen. Ansonsten wird zwar ein Browser Ihr Dokument korrekt anzeigen, die DOM-Struktur des Elements ist aber nicht brauchbar. Denn Browser versuchen für die Anzeige das Beste aus dem HTML-Quellcode einer Seite zu machen, ersparen dem Anwender aber Fehlermeldungen wie “in Zeile 23 ist ein <p> nicht abgeschlossen”. Als Entwicklung hätten Sie so etwas natürlich gerne. Diese Prüfung lässt sich mit einem Validator wie unter den Webadressen http://www.htmlhelp.com/tools/validator/ oder http://validator.w3.org/ erreichen.

Siehe auch:

Ähnliche Beiträge