Processing Classes

element.classList is a DOMTokenList: a live, case-sensitive view of the class attribute that trims whitespace and ignores duplicates, so you never split className strings by hand. The same interface backs relList on links and sandbox on iframes.

const list = document.querySelector('p').classList;      // <p class="card  featured">
list.add('active', 'featured');                           // duplicate ignored
console.log(list.toggle('dark'), list.toggle('dark'), list.toggle('big', true));
console.log(list.replace('card', 'panel'), list.value);

true false true
true panel featured active big

toggle() returns whether the token is present afterward; its second argument makes conditional styling one line: row.classList.toggle('selected', row.id === currentId). supports() works only on lists with a fixed vocabulary, such as iframe.sandbox.supports('allow-forms'); on classList it throws a TypeError, and a token containing a space throws an InvalidCharacterError.