Signatur
Beschreibung
Die schreibgeschützte Eigenschaft classList der Element-Schnittstelle enthält eine live DOMTokenList-Sammlung, die das class-Attribut des Elements repräsentiert. Diese kann dann verwendet werden, um die Klassenliste zu manipulieren.
Die Verwendung von classList ist eine bequeme Alternative zum Zugriff auf die Klassenliste eines Elements als leerzeichengetrennte Zeichenkette über element.className.
Wert: Ein DOMTokenList-Objekt, das den Inhalt des class-Attributs des Elements repräsentiert. Wenn das class-Attribut nicht gesetzt oder leer ist, gibt es eine leere DOMTokenList zurück, d. h. eine DOMTokenList mit der length-Eigenschaft gleich 0.
Obwohl die classList-Eigenschaft selbst in dem Sinne schreibgeschützt ist, dass Sie das DOMTokenList-Objekt nicht ersetzen können, können Sie der classList-Eigenschaft dennoch direkt zuweisen, was einer Zuweisung an ihre value-Eigenschaft entspricht. Sie können das DOMTokenList-Objekt außerdem mit den Methoden add(), remove(), replace() und toggle() verändern.
Rückgabewert
Beispiele
Verwendung von classList
const div = document.createElement("div");
div.classList = "foo"; // forwarded to classList.value
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("another-class");
// <div class="another-class"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);
// false
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");