Information Technology Reference
In-Depth Information
HINWEIS
»
http://html5.komplett.cc/code/chap_global/1234.html
http://html5.komplett.cc/code/chap_global/1234.js
»
http://html5.komplett.cc/code/chap_global/1234.css
»
12.1 Neuigkeiten beim »class«-Attribut
Als Erstes widmen wir uns einer neuen DOM-Methode des
HTMLElement
-In-
terfaces, die uns das bequeme Zugreifen auf Elemente nach dem Inhalt ihres
jeweiligen
class
-Attributs ermöglicht:
document.getElementsByClassName()
. Die
Verwendung ist denkbar einfach und sieht so aus:
var questions = doucment.getElementsByClassName('q');
Damit erhalten wir eine nach Position im DOM-Baum geordnete Liste mit allen
Elementen, deren
class
-Attribut den Wert
q
beinhaltet. Besteht diese Liste zu-
fällig aus
li
-Elementen mit den Namen der Hauptstädte, ist der erste Schritt
zur Implementierung unseres Spiels getan: Eine Live-Referenz auf die Spielob-
jekte ist in der Variable
questions
gesetzt. Sie spiegelt jederzeit den aktuellen
Status der einzelnen
li
-Elemente wider.
<li id=de class=q>Berlin</li>
<li id=at class=q>Wien</li>
<!-- und 25 weitere -->
Der Zugriff auf die einzelnen
li
-Elemente kann auf zwei Arten erfolgen: zum
einen über den Offset in der Liste und zum anderen über einen Namen, wobei
damit nicht der Inhalt des Knotens, sondern der Wert eines vorhandenen
id
-
oder
name
-Attributs gemeint ist.
questions.item(1).innerHTML => Wien
questions.namedItem('de').innerHTML => Berlin
Die Länge der Liste findet sich in
questions.length
, womit der Offset für
item(i)
Werte von
0
bis
questions.length-1
einnehmen darf. Anstelle eines
id
-
Attributs kann bei Elementen mit
name
-Attributen, wie zum Beispiel
form
, über
namedItem(str)
auch nach Werten in diesem Attribut gesucht werden.
Wenn Sie nach mehreren Klassen suchen wollen, müssen Sie nur die ge-
wünschten Werte durch Leerzeichen getrennt beim Methodenaufruf überge-
ben. Am fiktiven Beispiel eines Obstladens könnte die Suche nach Früchten, die
