An aikido teacher throwing a student
Part of the DOM Manipulation Reading List

For a very long time, manipulating classes was something that JavaScript did very poorly, often requiring the use of awkward regular expressions, which was one of the reasons that so many developers turned to JQuery in years past. Thankfully, has had its own powerful class manipulation features for some time, with excellent browser support.

Manipulating classes in native JavaScript is achieved with the classList property. If we have a figure element on a page: 

<figure class="aki">
    <img src="aikido.jpg" alt>
    <figcaption>An aikido teacher throwing a student</figcaption>
</figure>

And we grab a reference to the element using getElementsByClassName: 

var akifig = document.getElementsByClassName("aki")[0];

We can get array-like structure of the classes currently applied to the element by using classList. In this case, I’ll write the results to the console: 

console.log(akifig.classList);

> ["aki"]

Adding a class

We can add a class to the element by using the add method: 

akifig.classList.add("martial")

akifig.classList
> ["aki","martial"]

Multiple classes can be added by including them in the list: 

akifig.classList.add("martial", "arts");

Removing a class

A class can be removed from an element with, not surprisingly, remove: 

akifig.classList.remove("aki")

akifig.classList
> ["martial"]

Like add, it’s also possible to remove multiple classes by listing them.

Checking if an element has a class

You can check if an element has a specific class by using contains: 

if (akifig.classList.contains("martial")) {
    console.log("Hiya");
}

Toggling a class

Rather than specifically adding and removing a class in response to an action, it’s much easier to toggle it. If we have a button element underneath the figure: 

<figure class="aki">
    <img src="aikido.jpg" alt>
    <figcaption>An aikido teacher throwing a student</figcaption>
</figure>
<button>Switch</button>

And we grab the button with JavaScript, then we can easily switch a showhide class back and forth on click: 

var akifig = document.getElementsByClassName("aki")[0];
var switchHit = document.querySelector("figure + button");

switchHit.addEventListener("click", function() {
    akifig.classList.toggle("hide");
})

The hide class might consist of the following declaration: 

.hide { display: none; }

… which will effectively flip the visibility of the figure element back and forth with every click.

IE Limitations & Alternatives

IE 10 & 11, together with Android 4.3 and earlier, do not support classList on ; nor do they allow multiple parameters on add or remove; IE9 and earlier does not support classList at all. To deal with these limitations, I would recommend adding the classList.js shim, or using className instead. Using the previous examples:

To add a class, replacing all other classes: 

akifig.className = "martial";

To remove all classes from an element: 

akifig.className = "";

To add a class without removing other applied classes: 

akifig.className += " flip";

(Note the space in front of the added class name).

Photograph by Daniele Oberti, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.