zu,
document. getElementsByTagName("a")[1]
auf das zweite
a
-Element usw.
10.3.4    Auf Elemente des HTML-Dokuments zugreifen
    Das nachfolgende Beispiel zeigt eine Anwendungsmöglichkeit von vielen. In dem HTML-Dokument wird eine nummerierte Liste von Großstädten zunächst alphabetisch sortiert ausgegeben. Unterhalb der Liste kann der Anwender jedoch mit Hilfe zweier Formular-Buttons zwischen alphabetischer Sortierung oder geografischer Sortierung wechseln.
Beispiel
    
    
    
    
    
    
    
    
    

     
Große Städte alphabetisch von A bis Z
    

    

     

1. Berlin

     

2. Dortmund

     

3. Dresden

     

4. Düsseldorf

     

5. Essen

     

6. Frankfurt

     

7. Hamburg

     

8. Hannover

     

9. Köln

     

10. Leipzig

     

11. München

     

12. Nürnberg

     

13. Stuttgart

    

    

     
     
onclick="ABC()">
         
onclick="GEO()">
    

    
    
    Bild 10.6: Unterschiedliche Listensortierung, abhängig von der angeklickten Option
Erläuterung
    Im Beispiel ist die nummerierte Liste zunächst mit den Städtenamen in alphabetischer Sortierfolge notiert. In dem Formular unterhalb der Liste sind zwei Buttons notiert. Der eine ruft die Funktion
ABC()
auf, der andere die Funktion
GEO()
. Die Funktion
GEO()
, die im Script-Bereich im Dokumentkopf notiert ist, prüft zunächst über die Variable
Art
, ob die Liste bereits geografisch sortiert ist. Wenn dies der Fall ist, wird die Funktion vorzeitig mit
return
ohne Rückgabewert beendet. Andernfalls erfolgt die Sortierung. Dazu wird mit zuerst
var Staedte = new Array();
ein neues, leeres Array definiert. Das Vorhaben ist, diesem Array mit den Städtenamen aus der Liste zu füllen. Dazu geht die Funktion der Reihe nach, in einer
for
-Schleife
,
alle Elemente vom Typ
li
durch, welche in dem Dokument vorkommen. Dieser Zugriff erfolgt mit
document. getElementsByTagName("li")
.
    Über
document.getElementsByTagName("li").length
kann die Anzahl der
li
-Elemente im Dokument ermittelt werden. Diese Information benutzt die Funktion als Abbruchbedingung für die
for
-Schleife. Innerhalb der Schleife wird dem Array der Inhalt des jeweils aktuellen
li
-Elements hinzugefügt.
    Mit
document.getElementsByTagName("li")[i].firstChild.nodeValue
wird dabei auf den Inhalt des jeweiligen
li
-Elements zugegriffen. Aus DOM-Sicht ist
document. getElementsByTagName("li")[i]
ein Knoten, nämlich der
i
-te
li
-Elementknoten im Dokument.
firstChild
ist eine Eigenschaft von DOM-Knoten. Über diese Eigenschaft können Sie auf den ersten Kindknoten eines Knotens zugreifen. Der erste Kindknoten aller
li
-Elemente im Dokument ist deren Textinhalt, also jeweils ein Städtename. Die Eigenschaft
firstChild
liefert aber noch nicht den Inhalt des Elements, sondern nur das Objekt des Inhalts. Um tatsächlich an den Inhalt heranzukommen, also an den konkreten Städtenamen, muss eine weitere Eigenschaft des Knoten-Objekts bemüht werden, nämlich die Eigenschaft
nodeValue
. Die Kombination
firstChild.nodeValue
wird häufig verwendet, um den Inhalt eines Elements zu ermitteln oder ihn festzulegen.
    Nachdem das Array mit den