Signatur
Beschreibung
DOMTokenList.length liefert die Anzahl der Tokens, die aktuell in der Liste gespeichert sind. Die häufigste DOMTokenList ist Element.classList. Weitere Beispiele sind HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLIFrameElement.sandbox und HTMLOutputElement.htmlFor.
Die Liste ist live. Ändert sich das zugrunde liegende Attribut (etwa class), passt sich length sofort an, egal ob die Änderung über add(), remove(), toggle(), className oder setAttribute() erfolgt ist.
Typische Anwendungen sind die Prüfung, ob ein Element überhaupt Klassen hat, das Durchlaufen der Liste mit einer klassischen for-Schleife zusammen mit item(index) und die Begrenzung der Anzahl gesetzter Tokens. Doppelte Tokens im Attribut werden nur einmal gezählt, weil die Liste als geordnete Menge ohne Duplikate geführt wird.
Rückgabewert
unsigned long) mit der Anzahl der eindeutigen Tokens in der Liste. Bei leerem oder fehlendem Attribut ist der Wert 0.Beispiele
Anzahl der CSS-Klassen eines Elements ermitteln
const box = document.createElement('div');
box.className = 'card card--active shadow';
console.log(box.classList.length);Live-Verhalten: length passt sich automatisch an
const btn = document.createElement('button');
console.log(btn.classList.length); // 0
btn.classList.add('btn', 'btn-primary');
console.log(btn.classList.length); // 2
btn.classList.remove('btn-primary');
console.log(btn.classList.length); // 1
btn.setAttribute('class', 'a b c d');
console.log(btn.classList.length); // 4Duplikate und Leerzeichen werden nicht mitgezählt
const el = document.createElement('span');
el.setAttribute('class', ' foo bar foo ');
console.log(el.classList.length);
console.log([...el.classList]);Klassische Schleife mit item() und length
const nav = document.createElement('nav');
nav.className = 'menu menu--sticky dark';
const { classList } = nav;
for (let i = 0; i < classList.length; i++) {
console.log(`${i}: ${classList.item(i)}`);
}
// Elemente ohne Klassen herausfiltern
const unstyled = [...document.querySelectorAll('p')]
.filter((p) => p.classList.length === 0);
console.log(`Absätze ohne Klasse: ${unstyled.length}`);// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung wie
el.classList.length = 0wird im nicht-strikten Modus stillschweigend ignoriert und löst im Strict Mode einenTypeErroraus. Zum Leeren der Liste nutzt manel.className = ''oderel.removeAttribute('class'). - Live-Liste: Wer beim Durchlaufen mit
for (i < list.length)Tokens entfernt, überspringt Einträge, weil sichlengthund die Indizes verschieben. Deshalb besser rückwärts iterieren oder vorher mit[...list]eine Kopie anlegen. - Die Zahl beschreibt eindeutige Tokens, nicht Zeichen.
el.className.lengthdagegen ist die Länge des Strings, einschließlich der Leerzeichen. - Wenn nur geprüft werden soll, ob ein bestimmtes Token vorhanden ist, ist
contains()klarer als ein Vergleich überlength. - Kompatibilität: Die Eigenschaft wird von allen modernen Browsern unterstützt. Der Internet Explorer 10/11 unterstützte
classListnur für HTML-Elemente, nicht für SVG-Elemente.