classList API (DOMTokenList)

The `classList` API provides methods for efficiently adding, removing, toggling, and checking CSS classes on DOM elements. It is the usual DOM interface for changing an element’s class names without manually parsing or rebuilding the `class` attribute.

An element’s `classList` property returns a `DOMTokenList` representing the individual CSS classes currently assigned to that element. For example, `element.classList` lets you work with `"active"` and `"hidden"` as separate tokens rather than manipulating one whitespace-separated string.

Use `add()` to add one or more classes and `remove()` to delete them. `contains()` checks whether a class is present, while `toggle()` adds the class when it is absent and removes it when it is present.

`toggle()` can also receive a second argument that forces the desired state: `toggle("active", true)` ensures the class exists, while `toggle("active", false)` ensures it does not. This is useful when the desired class state comes from another boolean value.

Compared with assigning `element.className`, `classList` avoids common string-manipulation problems such as accidentally removing unrelated classes. Methods such as `replace()` and `contains()` also make targeted class changes straightforward.

Key points

• `classList` exposes an element's CSS classes as a `DOMTokenList`.
• Use `add()` and `remove()` for explicit class changes.
• Use `contains()` to test whether a class is present.
• Use `toggle()` to switch a class, or pass a boolean to force its state.
• `classList` can accept multiple class names with methods such as `add()` and `remove()`.

Interview questions

What does `contains()` return, and how would you use it in UI code?

`classList.contains("name")` returns a boolean indicating whether that class token is present. It can be used to inspect UI state before performing an action. For example, code can check whether an element currently has `is-open` before deciding how to update related behavior.

What is `classList` in JavaScript?

`classList` is a property on DOM elements that exposes their CSS classes as a `DOMTokenList`. It provides methods for changing individual classes without manually editing the entire class string. Common methods include `add()`, `remove()`, `contains()`, and `toggle()`. This makes class manipulation less error-prone than string replacement.

How would you add and remove a CSS class from an element?

I would call `element.classList.add("className")` to add the class and `element.classList.remove("className")` to remove it. These operations affect the specified class without replacing other classes on the element. Multiple class names can also be supplied to methods that accept multiple tokens.

What is the difference between `toggle()` and `toggle()` with a second argument?

With one argument, `toggle()` switches the presence of the specified class: it removes the class if present and adds it if absent. With a second boolean argument, it forces the class into the requested state. A truthy second argument ensures the class is present, while a false value ensures it is absent.

Why might you prefer `classList` over modifying `className` directly?

`className` exposes the entire class attribute as a string, so direct manipulation can require parsing or reconstructing the existing value. `classList` works with individual class tokens and provides operations designed specifically for them. This reduces the chance of accidentally changing unrelated classes.