Information Technology Reference
In-Depth Information
und füllen gleichzeitig ein neues Array mit den Indizes von
0
-
q.length
. Die-
ses Array sortieren wir dann zufällig und decken die gewünschte Anzahl
n
an
Hauptstädten wieder auf - dem Zusatzfeature
Anzahl der Städte wählen!
steht
damit nichts mehr im Wege.
12.4 Das »classList«-Interface
Mit
getElementsByClassName()
haben wir bereits eine erste Möglichkeit ken-
nengelernt, mit dem globalen
class
-Attribut zu arbeiten, und das
classList
-
Interface ist eine zweite. Damit können alle Werte eines
class
-Attributs in
einer sogenannten
DOMTokenList
über die Methoden
item()
,
contains()
,
add()
,
remove()
und
toggle()
verwaltet werden. Nehmen wir als Beispiel wieder das
class
-Attribut eines Produkts in unserem fiktiven Obstladen:
<li class="rot Apfel">
Über
li.classList
sind damit folgende Eigenschaften bekannt:
li.classList.length => 2
li.classList.item(0) => rot
li.classList.item(1) => Apfel
li.classList.contains('rot') => true
li.classList.contains('Apfel') => true
li.classList.contains('bio') => false
Haben wir beim Auspreisen das Bio-Schild vergessen, können wir unserem
roten Bio-Apfel dieses nachträglich zuweisen:
li.classlist.add('bio')
li.classList.item(2) => bio
Die weit gereiste Banane aus Ecuador im Nebenregal wurde fälschlicherweise
als biologisch eingestuft - die Behebung dieses Fehlers ist einfach:
banana.classList.remove('bio')
Für Brot, das am Morgen frisch und am Abend nicht mehr ganz so frisch ist,
könnten wir
toggle()
einsetzen, um den jeweiligen Zustand anzuzeigen:
// am Morgen frisch vom Bäcker
brot.classlist.add('frisch')
// am späten Nachmittag
brot.classList.toggle('frisch')
brot.classList.contains('frisch') => false
