Element.classList is a read-only instance property that returns a live DOMTokenList of the element’s CSS classes. Learn add, remove, toggle, contains, and replace—and why it beats string surgery on className—with five examples and try-it labs.
Instance property
Read-only list
DOMTokenList
class attribute
Baseline widely
add · toggle · remove
Almost every interactive UI toggles CSS classes: open menus, active tabs, dark mode, loading spinners. Working with className as one big string is error-prone.
classList gives you a clean token API: add one class, remove another, or toggle a state without worrying about extra spaces or duplicate names.
const btn = document.querySelector("button");
btn.classList.add("is-active");
btn.classList.toggle("is-loading");
console.log(btn.classList.contains("is-active")); // truePrefer classList for day-to-day class changes. Use className when you intentionally want to replace the entire class string at once.
MDN: the read-only classList property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.
class attribute.classListA DOMTokenList representing the element’s class attribute. If class is missing or empty, you get an empty list (length === 0).
| Item | Detail |
|---|---|
| Type | DOMTokenList |
| Property | Read-only (methods mutate the tokens) |
| Common methods | add, remove, toggle, contains, replace |
| vs className | className is one string; classList is a token API |
el.classList = "foo bar" is forwarded to classList.value. Prefer explicit add / remove for clarity in tutorials and apps.
MDN starts with a div, then uses the classList API to remove, add, toggle, and check classes:
const div = document.createElement("div");
div.classList = "foo"; // forwarded to classList.value
console.log(div.outerHTML); // <div class="foo"></div>
div.classList.remove("foo");
div.classList.add("another-class");
console.log(div.outerHTML); // <div class="another-class"></div>
div.classList.toggle("visible");
console.log(div.classList.contains("foo")); // false
div.classList.add("foo", "bar", "baz");
div.classList.replace("foo", "qux");Related learning: className, CSS class selectors, and UI state patterns like is-open / is-active.
| Goal | Code / note |
|---|---|
| Add | el.classList.add("active") |
| Remove | el.classList.remove("active") |
| Toggle | el.classList.toggle("open") |
| Force toggle | el.classList.toggle("open", isOpen) |
| Check | el.classList.contains("active") |
| Replace | el.classList.replace("old", "new") |
| MDN status | Baseline Widely available |
Four facts about Element.classList.
get onlyInstance
DOMTokenListLive tokens
methodsadd / toggle
widelyOct 2017+
Examples follow MDN Element: classList. Labs create a simple div so you can safely call the token methods.
Inspect the list, then add and remove classes.
classListLog length, value, and whether a class is present.
const div = document.createElement("div");
div.className = "card featured";
console.log(div.classList.length);
console.log(div.classList.value);
console.log(div.classList.contains("card"));Each space-separated class becomes one token. value is the serialized string (same idea as className).
add and removeMDN pattern: swap classes without rewriting the whole string.
const div = document.createElement("div");
div.classList = "foo";
div.classList.remove("foo");
div.classList.add("another-class");
console.log(div.outerHTML);add and remove accept multiple names: add("a", "b"). Duplicates are ignored by add.
Practice UI-state toggles and class replacement.
toggle and Force FlagFlip a class, then force it on or off with a boolean.
const div = document.createElement("div");
div.classList.toggle("visible"); // adds
console.log(div.classList.contains("visible"));
div.classList.toggle("visible"); // removes
console.log(div.classList.contains("visible"));
const i = 5;
div.classList.toggle("visible", i < 10); // force add
console.log(div.classList.value);One-argument toggle flips presence. Two-argument form is perfect for “set state from a boolean.”
replace and Multi-AddSwap one class for another and add several tokens at once.
const div = document.createElement("div");
div.classList.add("foo", "bar", "baz");
div.classList.replace("foo", "qux");
console.log(div.classList.value);
const cls = ["alpha", "beta"];
div.classList.add(...cls);
console.log(div.classList.contains("alpha"));replace returns true when the old token existed. Spread syntax keeps class arrays tidy.
Feature-detect and remember the core methods.
console.log({
supported: "classList" in Element.prototype,
type: "DOMTokenList",
tip: "Prefer classList over string edits on className",
status: "Baseline Widely available (MDN)"
});Modern browsers all expose classList. Use it as the default class API in new code.
<html> / <body>.Space-separated names like card featured.
A live view of those individual tokens.
add, remove, toggle, replace.
The attribute and styles stay in sync automatically.
classList property is read-only; mutate tokens with methods.className strings.Element.classList is Baseline Widely available (MDN: across browsers since October 2017). Logos use the shared browser-image-sprite.png sprite from this project.
Read-only DOMTokenList — add, remove, toggle, contains, and replace CSS classes.
Bottom line: Use classList for everyday class changes. Prefer toggle(class, force) for boolean UI state. Avoid fragile string concatenation on className.
classList is the modern way to manage CSS classes in JavaScript. Use add, remove, and toggle for UI state, and leave messy string edits behind.
Continue with className, children, or the JavaScript hub.
toggle(name, force) for boolean UI statecontains before branchingis-open, is-active)classList over string surgeryclassName by handclassList replaces the objecttoggle without force flips stateclassListLive DOMTokenList for CSS classes—add, remove, toggle, and replace safely.
on Element
Kindlive tokens
Typemenus & themes
Usewidely available
Statusbest for boolean
TipDOMTokenList is iterable—so you can use for (const name of el.classList) to walk every class token.
Learn how to get and set the full class attribute string.
5 people found this page helpful