Städtenamen gefüllt ist, macht die Funktion
GEO()
einfach das Umgekehrte und schreibt den Array wieder zurück in die Liste – ebenfalls mit einer
for
-Schleife.
Der bekannte Ausdruck
document.getElementsByTagName("li")[i].firstChild. nodeValue
steht diesmal links von der Zuweisung. Dadurch wird dem Inhalt des Listenelements dynamisch ein neuer Wert zugewiesen. Im Beispiel ist das der kompliziert aussehende Wert
Staedte[geoArray[i]]
. Die Städte sollen geografisch ausgegeben werden. Nun gibt es keinen Algorithmus, welcher die geografische Lage von Städten kennt. Ganz oben im Script-Bereich ist daher ein Array namens
geoArray
notiert. Die Zahlen, mit denen er initialisiert wird, sind einfach die Indexnummern der alphabetisch sortierten Städte. So hat
geoArray[0]
beispielsweise den Wert 6. Dank dieser Information kennt die Funktion
GEO()
, dass die nördlichste der Städte diejenige ist, welche in der alphabetischen Sortierung die Indexnummer 6 hat (Hamburg). Mit
Staedte[geoArray[i]]
benutzt die Funktion als aktuellen Index für die Stadt, die in die Liste geschrieben werden soll, also einfach den Zugriff auf
geoArray
.
Die Funktion
ABC()
geht ganz genauso vor wie die Funktion
GEO()
. Sie unterscheidet sich nur dadurch von letzterer, dass sie nach dem Einlesen des
STAEDTE
-Arrays die Objektmethode
sort()
auf den Array anwendet, um die Einträge zu sortieren. Dann schreibt sie das sortierte Array zurück in die nummerierte Liste.
Ein weiteres Element wird von beiden Funktionen ebenfalls noch geändert: nämlich das
span
-Element innerhalb der Überschrift. Da für dieses Element im HTML-Code mit
id="Art"
ein ID-Wert notiert ist, lässt sich mit
document.getElementById("Art")
bequem darauf zugreifen. Mit der üblichen Syntax
firstChild.nodeValue
wird der Text des Elements angesprochen und dynamisch geändert.
10.3.5 HTML-Elementobjekte und HTML-Attribute als Objekteigenschaften
Der HTML-Variante des DOM zufolge, stellt jedes HTML-Element in einem HTML-Dokument ein Objekt dar. Der Zugriff auf die Elemente ist wie zuvor beschrieben über Objektmethoden wie
document.getElementById()
oder
document. getElementsByTagName()
möglich.
Jedes HTML-Element hat Eigenschaften. So stellt jedes erlaubte Attribut eines HTML-Elements eine DOM-Eigenschaft dieses Elements dar. Das HTML-Element
input
hat beispielsweise ein erlaubtes Attribut
value
, und das HTML-Element
h1
hat ein erlaubtes globales Attribut
title
. Im DOM gibt es folglich ein
input
-Elementobjekt mit der Eigenschaft
value
und ein
h1
-Elementobjekt mit der Eigenschaft
title
.
Darüber hinaus definiert das DOM für einige der HTML-Elemente eigene Methoden. So gibt es beispielsweise für das
form
-Elementobjekt (also das DOM-Objekt des HTML-Elements
form
) die Methoden
submit()
(Formular absenden) und
reset()
(Formulareingaben verwerfen).
Das folgende Beispiel zeigt, wie Sie Verweise dynamisch ändern können.
Coole Links Bild 10.7: Jeder Klick auf den Button ändert den angezeigten Link.
Erläuterung
Das Beispiel enthält im sichtbaren Bereich einen Hyperlink mit
id="CoolerLink"
, der zunächst ein reiner Anker ist und weder ein Verweisziel definiert, noch einen Elementinhalthat. Unterhalb davon ist ein Formular mit einem Button notiert. Der Button enthält einen Event-Handler
onclick
, der beim Anklicken des Buttons ausgelöst wird. In diesem Fall wird die Funktion
CoolLink()
aufgerufen, welche im Script-Bereich im Dokumentkopf notiert ist.
Diese Funktion greift mit
document.getElementById("CoolerLink").href
direkt auf das
href
-Attribut des Links mit
Weitere Kostenlose Bücher
Kostenlos Online Lesen 
