The .classList() API

Assuming you have an element in the DOM:

Get a reference to that DOM element:
const el = document.querySelector(#el);
Then you can manipulate the classes on that element with the classList method.
// Add a class
el.classList.add(open);
// Add many classes
el.classList.add(this, little, piggy);
let classes = [is-message, is-warning];
el.classList.add(…classes);
// Remove a class
el.classList.remove(open);
// Remove multiple classes
el.classList.remove(this, little, piggy);
// Loop over each class
el.classList; // DOMTokenList (pretty much an array)
el.classList.forEach(className => {
// dont use class as thats a reserved word
console.log(className);
});
for (let className of $0.classList) {
console.log(className);
}
el.classList.length; // integer of how many classes there are
// Replace a class (replaces first with second)
el.classList.replace(is-big, is-small);
// Toggle a class (if its there, remove it, if its not there, add it)
el.classList.toggle(open);
// Remove the class
el.classList.toggle(open, false);
// Add the class
el.classList.toggle(open, true);
// Add the class with logic
el.classList.toggle(raining, weather === raining);
// Check if element has class (returns true or false)
el.classList.contains(open);
// Look at individual classes