JavaScript/DOM/Element/classList
Die Eigenschaft Element.classList stellt die Klassen, die einem Element zugeordnet sind, in Form eines DOMTokenList Objekts zur Verfügung.
Syntax
const elementClasses = elementNodeReference.classList;
Während die Element.className-Eigenschaft direkt den Wert des class-Attributs als Zeichenkette zur Verfügung stellt, werden die dort aufgeführten Klassen mittels dieser Eigenschaft als ein Objekt mit der DOMTokenList Schnittstelle angeboten. Dadurch erhalten Sie die Möglichkeit, auch bei mehreren vorhandenen Klassen einzelne davon hinzuzufügen, zu verändern oder zu löschen. Um dies zu erreichen, können Sie mit der Punkt-Notation die folgenden Methoden dieses Objekts aufrufen:
-
add: fügt der Liste eine weitere Klasse hinzu -
remove: entfernt eine Klasse aus der Liste -
toggle: schaltet eine Klasse an bzw. ab -
contains: überprüft, ob eine Liste aller Klassen eine bestimmte Klasse enthält. -
item: Abrufen des Klassennamens an einer Position in der Liste -
length: Ermitteln, wieviele Klassennamen die Liste enthält
Eine DOMTokenList ist eine geordnete Menge. Das bedeutet, dass es sich im Prinzip um eine Liste handelt, deren Einträge eine festgelegte Reihenfolge haben und bei der neue Elemente stets am Ende angefügt werden (im Gegensatz beispielsweise zu einem Hash-Set). Die Besonderheit einer Menge ist aber, dass sie das gleiche Element nicht zweimal enthalten kann. Auch wenn Sie für ein Element class="x y z x" notieren, würde die Klasse x nur einmal in der classList zu finden sein.
Inhaltsverzeichnis
Anwendungsbeispiele
Liste aller Attributklassen anzeigen
function Auswerten() {
let hinweis = document.getElementById('tipp');
let text ='Folgende Klassen existieren: ' + hinweis.classList;
document.getElementById("ausgabe").innerHTML = text;
}
In diesem Beispiel werden alle vorhandenen Klassen des Absatzes in einem String ausgelesen. Der Wert dieses Strings entspricht in Chrome und Firefox exakt dem Inhalt des class-Attributs, inklusive der Leerstellen. Der Nutzen dieses Beispiels besteht nur darin, Sie auf die Nutzlosigkeit von classList für diesen Zweck aufmerksam zu machen. Verwenden Sie besser die className Eigenschaft für diesen Zweck, um direkt auf das class-Attribut zuzugreifen.
Klassen hinzufügen mit add
Um einer classList eine Klasse hinzuzufügen, verwenden Sie die add Methode. Das Praktische an dieser Methode ist, dass sie die Klasse nur dann hinzufügt, wenn sie noch nicht in der classList vorhanden ist. Sie brauchen also vor dem Aufruf von add nicht selbst zu prüfen, ob Sie möglicherweise ein Duplikat erzeugen würden. Eine neue Klasse wird am Ende der classList hinzugefügt.
Der Rückgabewert von add ist undefined.
function setzeSicherheitshinweis(elementId) {
let hinweis = document.getElementById(elementId);
hinweis.classList.add('sicherheitshinweis');
}
Wenn Sie einem Element mehrere Klassen auf einmal hinzufügen möchten, rufen Sie entweder add mehrfach auf, oder übergeben Sie für jede Klasse einen eigenes Argument.
// Füge einem Element die Klassen test, alarm, vorsicht und warnung hinzu
element.classList.add('test', 'alarm', 'vorsicht', 'warnung');
Klassen entfernen mit remove
Die remove Methode entfernt eine Klasse aus der classList. Die Methode überprüft vorher, ob die zu entfernende Klasse überhaupt vorhanden ist. Wenn nicht, tut sie einfach nichts.
Der Rückgabewert von remove ist undefined.
function entferneSicherheitshinweis(elementId) {
let hinweis = document.getElementById(elementId);
hinweis.classList.remove('sicherheitshinweis');
}
Genau wie bei add können Sie mehrere Klassen auf einmal entfernen, indem Sie jede Klasse als eigenes Argument an remove übergeben.
Überprüfen mit contains
Um abzufragen, ob für ein Element eine bestimmte Klasse gesetzt ist, verwenden Sie die contains Methode der classList. Das Ergebnis ist entweder true oder false.
if (elem.classList.contains('circle')) {
console.log("Das Element steht für einen Kreis.");
}
Sie sollten solche Abfragen nicht verwenden, um den style eines Elements zu ändern. Dafür sind Klassenselektoren im CSS da.
Wirkliche Anwendungsfälle für contains sind eher selten. Die naheliegendste Anwendung könnte das Umschalten einer Klasse sein, aber dafür gibt es bereits eine eigene Methode.
Umschalten mit toggle
Die toggle Methode prüft, ob die classList die angegebene Klasse bereits enthält. Wenn ja, verhält sich toggle so wie remove und entfernt die Klasse. Und wenn sie noch nicht vorhanden ist, verhält sich toggle so wie add und fügt die Klasse hinzu. Mit jedem Aufruf wird also das Vorhandensein dieser Klasse umgeschaltet.
Der Rückgabewert der Methode entspricht contains, d.h. toggle gibt true zurück, wenn die Klasse nach der Rückkehr in der classList vorhanden ist, und andernfalls false.
document.addEventListener("DOMContentLoaded", function () {
document.querySelector('#button1').addEventListener('click',showHide);
document.querySelector('#button2').addEventListener('click',showHide);
function showHide(event){
event.target.parentNode.classList.toggle('hide');
let text = event.target.firstChild;
text.data = text.data == 'mehr' ? 'weniger' : 'mehr';
}
});
Im Beispiel gibt es zwei section-Elemente, deren Inhalt beim Klick auf die Buttons gezeigt oder verborgen wird.
Bei einem Klick auf den Button wird die Funktion showHide() aufgerufen, die mit event.target ermittelt, welcher Button geklickt wurde und dann mit parentNode dem Elternelement mit der Methode classList.toggle eine neue Klasse zuweist. Zeitgleich wird mit innerText der Text des Buttons geändert.
Bei einem weiteren Klick wird die Klasse erneut gewechselt. Im Beispiel wird noch mit einer CSS Transition dafür gesorgt, dass der Übergang sanft erfolgt.
force: ein zweites Argument bei toggle
Es gibt auch den Anwendungsfall, dass man eine Klasse setzen möchte, wenn ein bestimmter Test true ergibt, und sie andernfalls entfernen. Das kann man lösen, dass man den Test durchführt und je nach Ergebnis classList.add oder classList.remove aufruft. Um dies zu vereinfachen, unterstützt toggle einen zweiten Parameter, der einen booleschen Wert empfängt und Ihnen genau diese Logik abnimmt. Übergeben Sie als zweiten Parameter true (oder einen Wert, der nach true konvertiert wird), wird die Klasse hinzugefügt. Übergeben Sie false, wird sie entfernt. Die Übergabe von undefined entspricht dem Weglassen des Parameters und führt zum zuvor beschrieben Umschaltverhalten.
let darkmode = windows.matchMedia("(prefers-color-scheme: dark)");
document.body.classList.toggle("dark-mode", darkmode.matches);
Die matchMedia-Methode des window-Objekts erstellt MediaQueryList Objekt, mit dem man abfragen kann, ob eine bestimmte CSS-@media Abfrage zutrifft oder nicht. Die matches Eigenschaft dieses Objekts ist true, wenn die Abfrage zutreffend ist. Das Code-Beispiel setzt am body-Element die Klasse dark-mode, wenn der Benutzer im Betriebssystem (oder vielleicht im Browser, sofern der das anbietet) den dunklen Modus für Anwendungen eingestellt hat.
Zugriff auf Klassennamen über ihre Position in der Liste: item und length
Mit der item-Methode können Sie die Einträge in der classList an Hand ihrer Position abrufen. Die erste Klasse hat die Position 0. Um zu erfahren, wieviele Einträge in der classList stehen, verwenden Sie die length Eigenschaft.
Die item-Methode ist ein Synonym für den internen Indexer der DOMTokenList. Sie können Sie die classList daher auch direkt wie ein Array verwenden.
for (let i = 0; i < elem.classList.length; i++) {
let klasse1 = elem.classList.item(i);
let klasse2 = elem.classList[i]; // gleiches Ergebnis
}
Im Beispiel durchläuft das angesprochene Element eine Schleife, in der alle vorhandenen Klassen ausgelesen werden. Es wäre verlockend, die Variable, in die die i-te Klasse eingelesen wird, class zu nennen, aber das ist ein reserviertes Wort in JavaScript und würde zu einem Syntaxfehler führen.
item verwenden, rufen Sie eine Methode auf und verwenden deshalb runde Klammern. Nutzen Sie statt dessen den Indexer, müssen Sie die eckigen Klammern verwenden.
