classList: toggle classes the modern way

classList — the cleanest DOM API in the standard library

el.classList.add("active");
el.classList.remove("active");
el.classList.toggle("active");        // adds if missing, removes if present — returns new state
el.classList.contains("active");      // → true / false
el.classList.replace("old", "new");

Every method takes one or more class names. toggle accepts a force boolean too: toggle("active", isOn).

Why classList beats element.className

el.className = "card active";                 // wipes everything else
el.className += " active";                    // string-concat, easy to typo a missing space
el.classList.add("active");                   // surgical, idempotent

className is a string. Mutating it is fragile. classList knows it's a list and acts accordingly.

Combine with CSS for the visual state

A typical pattern:

.dialog        { display: none; }
.dialog.open   { display: block; }

dialog.classList.toggle("open");

State lives in one place: the class. CSS handles the visuals. JS handles the toggle. Each layer does what it's best at.