Die Sache mit den childNodes möchte ich nochmals etwas genauer erklären.
Die Container-Hierarchie eines HTML-Dokuments
Die Abbildung zeigt ein beliebiges HTML-Dokument. Wenn du vom blauen body-Element ausgehst,
dann hat es ein sogenanntes "Mutter-" oder "Eltern-Element", nämlich <html>, und zwei
"Kinder-Elemente" oder eben child nodes, nämlich <h1> und <div>.
Das in der <div> drin liegende <p>-Element ist dann bereits ein Enkel.
Wie kann man sich denn da verzählen?
Hier kann natürlich der Teufel im Detail stecken. In unserem Übungsbeispiel äussert sich genau so ein Detail.
Zwischen den <a>-Elementen in unserem HTML-Text befinden sich nämlich Zeilenschaltungen.
Zwar wissen wir, dass in HTML Abstände, Tabulatoren und Zeilenschaltungen eine untergeordnete Rolle spielen.
Ganz vernachlässigen können wir sie aber auch nicht, schliesslich sind sie ja auch dafür zuständig, Worte
voneinander zu trennen. Und für unsere Menü-<div> hat das nun spürbare Auswirkungen.
Alles, was sich darin befindet, sind "Kinder"-Elemente. Für die Hyperlinks leuchtet uns das problemlos ein,
aber die Zeilenschaltungen und allfällige Leerstellen und Tabulatoren gelten ebenfalls als "Kinder" - sie
sind so genannte "Text Nodes".
Zur Illustration kannst du das sogar kurz vergleichen. Ruf die beiden Beispielseiten nochmals ab, vergleiche die Anzahl Kinder, die ausgewiesen werden und wirf noch einen Blick auf den HTML-Code der Seiten.
Nun brauchen wir uns aber mit solchen Details nicht allzusehr zu belasten. Wir erweitern unser Skript ein wenig und zählen nur nach, was uns interessiert:
function klappmenu(mname,gname) {
ganzesmenu = document.getElementById(mname) ; // auf das Menü zielen
var wieviel = 0 ;
for(i=0 ; i<ganzesmenu.childNodes.length ; i++) {
dieseskind = ganzesmenu.childNodes[i] ;
if(dieseskind.className) wieviel++ ;
}
alert("Hallo\n\nwir kümmern uns nun um das Menü in der DIV \""
+ mname + '"\nDie Klassen der Einträge beginnen jeweils mit "' + gname + '"'
+ "\nund das Menü hat " + wieviel + " Einträge.") ;
}
Was ist neu?
wieviel und geben ihr den Wert 0. dieseskind an.
if(dieseskind.className)Wenn so ein Element einer Klasse zugeordnet ist (egal welcher), dann ist das Resultat der Abfrage "wahr", andernfalls "falsch". Und da in unserem Fall alle Hyperlinks einer Klasse zugeordnet sind, die Zeilenschaltungen aber sicher nicht, ist das ein geeigneter Mechanismus, um unsere Links zu zählen.
wieviel++ ist die mittlerweile bekannte Methode, den Wert der Variablen wieviel
um eins zu erhöhen. Und in der abschliessenden alert-Anweisung wird nun der Wert
dieser Variablen angezeigt.So, nun kann's Zeilenschaltungen nach Belieben haben und sogar noch zusätzlichen Text, wenn's denn sein müsste, auf diese Weise können wir unsere Links zuverlässig zählen.
Letztlich geht's dann ja gar nicht ums Zählen, sondern wir haben mit den Links ja was anderes vor. Aber die Vorarbeit haben wir schon mal erledigt: An Ihren Klassen sollt ihr sie erkennen!