The Element.classList
is a read-only property that returns a live DOMTokenList
collection of the class
attributes of the element. This can then be used to manipulate the class list.
Using classList
is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className
.
A DOMTokenList
representing the contents of the element's class
attribute. If the class
attribute is not set or empty, it returns an empty DOMTokenList
, i.e. a DOMTokenList
with the length
property equal to 0
.
Although the classList
property itself is read-only, you can modify its associated DOMTokenList
using the add()
, remove()
, replace()
, and toggle()
methods.
You can test whether the element contains a given class using the classList.contains()
method.
const div = document.createElement("div");
div.className = "foo";
console.log(div.outerHTML);
div.classList.remove("foo");
div.classList.add("anotherclass");
console.log(div.outerHTML);
div.classList.toggle("visible");
div.classList.toggle("visible", i < 10);
console.log(div.classList.contains("foo"));
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
div.classList.replace("foo", "bar");