classList

classList is a property of DOM elements that exposes a live DOMTokenList representing the element's class attribute. It provides a convenient API for inspecting and modifying the element's classes without manually parsing or rebuilding the class string. The DOMTokenList contains tokens separated by whitespace; each token is a valid CSS class name; the list updates automatically when className changes, and changes to the list reflect back to className.

Common methods on the DOMTokenList include add(...tokens) to add one or more classes, remove(...tokens) to remove one or more classes, contains(token) to test for the presence of a class, item(index) to retrieve a class by its index, the length property, toggle(token, force) to toggle a class on or off, and replace(oldToken, newToken) to replace one class with another. The list is designed to be used as a live interface to the element’s class attribute.

Usage examples: element.classList.add('hidden'); element.classList.toggle('active'); element.classList.contains('selected'); element.classList.replace('old', 'new').

Notes: The tokens are unique within the list; adding a class that already exists has no effect, and removing a class that is not present has no effect. Toggling without a force parameter flips the class state; with a boolean force, it will add or remove to match the given truthiness. The property is case-sensitive and operates on the element’s current class attribute.

Browser support for classList is broad in modern environments; older versions of some browsers did not support it, notably legacy iterations of Internet Explorer prior to IE 10. See also className and the DOMTokenList interface.