Selektoren und DOM-Manipulation

Statt weiterhin die (etwas drögen) Alerts auszugeben, wollen wir nun stattdessen eine kleine Zeitanzeige auf der Website generieren.  Dazu ändern wir zunächst den bisherigen HTML-Markup etwas ab: Wir erstellen zwei <div>-Container, im ersten Container soll die Begrüßung erscheinen, um zweiten die Uhrzeit. Um die Container per JavaScript ansprechen zu können, vergeben wir jeweils eine ID (wie beim Targeting in CSS).

Statt der Ausgabe per alert-Funktion wollen wir an dieser Stelle im JavaScript nun die Container per ID selektieren und die entsprechenden Werte dynamisch als Textinhalt in die Container schreiben. Dazu brauchen wir zunächst die Funktion, mit der wir in JavaScript ein Element selektieren können. Dies ist die Funktion getElementById("id"). So wie man der Funktion alert einen Text als Parameter übergeben kann, übergibt man dieser Funktion eine ID (in Anführungszeichen). Innerhalb des hierarchischen Seitenbaums (DOM - Document Object Model) sucht sie nach einem Element mit dieser ID und wenn eines gefunden wird, wird das Element selektiert, wodurch man Zugriff auf die dessen Eigenschaften erhält. Die Funktion getElementById kann nicht für sich eingesetzt werden, sondern es wird auf die HTML-Struktur angewendet. Diese wird in JavaScript durch document repräsentiert. Der komplette Ausdruck heißt demnach:
document.getElementById("gruss");

Die Verknüpfung der beiden Elemente durch einen Punk bezeichnet man auch als "Dot-syntax": Nimm dir das HTML-Dokument (document) und wende darauf die Funktion getElementById mit dem Parameter "gruss" an. Dieser reine Selektor tut aber für sich nun nichts als das Element mit dieser ID zu selektieren. Nun wollen wir aber eine Eigenschaft des selektieren Elements verändern, nämlich den (HTML-)Inhalt. Dafür steht uns die Eigenschaft innerHTML zur Verfügung.  Wenn wir dieser Eigenschaft einen Wert zuweisen, können wir in selektierte Elemente per JavaScript einen Text oder sogar HTML-Markup schreiben. Uns reicht hier aber ein Text:
document.getElementById("gruss").innerHTML="Guten Morgen!";

Für unser Beispiel würde diese Zeile aber noch nicht ihren Zweck erfüllen, da wir ja den Nutzer nicht immer mit "Guten Morgen!" begrüßen wollen. Aber wir können rechts vom Gleichheitszeichen natürlich auch eine Variable verwenden und die Variable "gruss" haben wir ja schon vorher erstellt und verwendet:
document.getElementById("gruss").innerHTML=gruss;

Für die Uhrzeit können wir analog vorgehen und fügen in den zweiten Container die Uhrzeit ein:
document.getElementById("uhrzeit").innerHTML=stunden+":"+minuten;

Nun fügen wir die Änderungen in die vorhandene Struktur ein:

Wir testen den neuen Stand wieder im Browser.  Die Inhalte werden nun unserem Ziel entsprechend dynamisch in die <div>-Container geschrieben. Aber die Uhr könnte natürlich ein paar CSS-Styles vertragen. Außerdem wäre es schöner, wenn man auch sehen könnte, wie die Sekunden durchlaufen. Dies Verbesserungen nehmen wir uns im nächsten Abschnitt vor.

> weiter