Spätzünder classList
Die DOM-Spezifikation verliert gerade mal einen Satz zu classList. Ich habe das Gefühl, das W3C schämt sich, dass classList erst 10 Years After dabei ist.
Der Vorgänger von classList war elem.className. className gibt die CSS-Klassen eines Elements als String zurück und musste als String notiert werden, um eine Klasse hinzuzufügen oder zu ersetzen.
classList Methoden und Eigenschaften
- classList.add ()
- fügt der classList eine neue Klasse hinzu
- classList.remove ()
- entfernt eine Klasse aus der classList, ohne die übrigen Klassen zu beeinflussen.
- classList.contains ()
- prüft, ob eine Klasse in der classList liegt
- classList.toggle ()
- toggelt eine Klasse in die classList bzw. hinaus. Beim ersten Aufruf wird die Klasse eingeschaltet, beim zweiten Aufruf wird die Klasse entfernt.
- classList.item ()
- gibt die Klasse an der angegebenen Position innerhalb der Liste zurück
- classList.toString ()
- wandelt die Liste in einen String um
- classList.length
- gibt die Zahl der Klassen in der classList an
- classList.value
- fügt dem classList-Objekt eigene Eigenschaft und Methoden hinzu
classList iterieren / durchlaufen
Ein Blick in die Browser-Konsole zeigt die Methoden und Eigenschaften des classList-Objekts.




<div class="nodelist fruits gallery nocaption"> … </div>
elem.classList gibt alle CSS-Klassen eines Elements als Array-ähnliche DOMTokenList zurück.
console.log ("nodelist", document.querySelector (".nodelist").classList);
▼ nodelist
▼ DOMTokenList
S 0: "nodelist"
S 1: "fruits"
S 2: "gallery"
S 3: "nocaption"
N length: 4
S value: "nodelist fruits gallery nocaption"
▼ DOMTokenList Prototype
F contains ()
F entries ()
F forEach ()
F item ()
F keys ()
Die DOMTokenList hat eine Länge und unterstützt Array-Methoden höherer Ordnung; mit forEach () iteriert das Skript über die Liste der CSS-Klassen eines Elements.
const items = document.querySelector (".nodelist").classList; items.forEach ((item, index) => { console.log ("items index", item, index) });
Am Rande: for of – die neue Iteration aus ES6 (nicht IE11).
classList toggle
classList toggle () ist wie geschaffen für das »slidedown« und »slideup« in den responsiven Menüs der mobilen Geräte.
Das Beispiel nutzt CSS transition für den slide-Effekt.
- classList.add()
- classList.contains()
- classList.item()
- classList.length
- classList.remove()
- classList.toggle
.toggle { transition: height 1s ease-in-out; height: 0px; overflow:hidden; } .slowdown { height: 160px }
Das Icon ist eine SVG-Grafik, class toggle ist eine HTML-Liste
<div class="icon"> <svg width="100" height="60" viewBox="0 0 600 240">…</svg> </div> <ul class="toggle"> <li>classList.add()</li> <li>classList.contains()</li> … </ul>
Zum Toggeln mit Javascript classList reichen ein paar Zeilen Code:
Toggeln mit Javascript classList
<script> let icon = document.querySelector('.icon'); icon.addEventListener('click', function () { document.querySelector('.toggle').classList.toggle('slowdown'); }); </script>
classList.toggle hat einen Seelenverwandten: toggleAttribute, das ein Boolean-Attribut wie hidden entfernt, wenn es gesetzt ist oder hinzufügt, wenn es nicht gesetzt ist.
elem . classList . contains
jQuery hat die wunderbare Methode hasClass. Mit purem Javascript (Vanilla) war der Test, ob ein Element eine bestimmte Klasse aufweist, immer Würfeln ohne Sechser.
contains () gibt true oder false zurück, je nachdem, ob die Klasse in der Liste der Klassen des Elements enthalten ist oder nicht.

<img id="elem" class="bird1 bird2 bird3" … /> … if (elem.classList.contains('bird1')) { }
classList.item
elem.classList.item() gibt den Namen der Klasse an einer Position zurück. classList.item() ist kein Array, also keine eckigen Klammern!
Mehrere Klassen
In jQuery fügt $(elem).addClass("first second third") einem Element gleich mehrere Klassen hinzu; mit classList ist die Syntax ähnlich, aber die einzelnen Klassen müssen in Hochkommas und von Kommas getrennt geschrieben werden.

Der Aufruf
console.log (document.querySelector('#b2').classList);
liefert
DOMTokenList 0: "bird1" 1: "bird2" 2: "bird3" constructor: DOMTokenListConstructor length: 3
classList vs className
Vor classList gab es bereits die Eigenschaft className. Der Aufruf von elem.className ersetzt den kompletten String des class-Attributs. Wenn also bereits CSS-Klassen vorhanden sind, löscht classList alles.
document.getElementsByTagName('tr')[i].className = 'newclass';
className setzt und liest den Namen der Klassen eines Elements, aber className liefert die Namen der Klassen in einem String, getrennt durch Leerzeichen. Damit kann man arbeiten, aber nicht so komfortabel wie mit classList.
<div id="look" class="foo bar nos"> … </div>
console.log (look.className) zeigt
Eine Klasse mit className hinzufügen:
look.className = look.className + " more";
Testen, ob look die Klasse bar enthält:
if (/bar/.test(look.className) === true) console.log ("contains");
oder auf classname testen mit search
let result = classes.search("bar");
Gibt "4" zurück, weil 4 der Startindex von bar im className-String ist.
Browser-Unterstützung für classList
classList wird von allen modernen Browser unterstützt. IE11 unterstützt zwar classList, allerdings nicht auf SVG-Elementen. Der Fehler ist zwar als "fixed" gekennzeichnet, ist aber erst in Microsoft Edge behoben.