If you have written any JavaScript then you have almost certainly used classList at least once. You may even think that classList is as simple as an add and remove method, but there is so much more to classList. In this article I want to show you everything that is possible with classList since it will make working with classes in JavaScript much easier.

The Basics

I of course need to mention the most basic usage of adding and removing classes. When you access the classList of an element you can use the add method to add a class and the remove method to remove a class. This is pretty straight forward, but most people don’t know that you can pass as many classes as you want to these methods and they will add/remove them all. You can also access the string of all classes by using the value property

element.classList.add("new-class", "another-class")
console.log(element.classList.value)
// new-class another-class

element.classList.remove("another-class")
console.log(element.classList.value)
// new-class

Contains

Sometimes you need to check to see if an element has a specific class in JavaScript in order to perform a certain operation. This is luckily very easy to do with classList. You can just call the contains method and pass the name of the class you want to check. This method will return true if the element has that class and false if it doesn’t.

console.log(element.classList.contains("new-class"))
// false

element.classList.add("new-class")
console.log(element.classList.contains("new-class"))
// true

Toggle

My favorite method of classList is the toggle method. This method lets you toggle a class on/off depending on if the class is already on the element.

element.classList.toggle("new-class")

The above is the same as the below.

if (element.classList.contains("new-class")) {
  element.classList.remove("new-class")
} else {
  element.classList.add("new-class")
}

This is not the only use of toggle, though. Sometimes you need to toggle a class based on a boolean value. For example if the boolean win is true then you want to add the win class to an element otherwise if win is false you want to remove the win class. Doing so is as simple as the below.

element.classList.toggle("win", win)

The above is the same as the below.

if (win) {
  element.classList.add("win")
} else {
  element.classList.remove("win")
}

ForEach

Sometimes you just want to loop through all the classes of an element to do some advanced checks. This is easy to do with the forEach method. The forEach method also works just like the array forEach method.

element.classList.add("one", "two")
element.classList.forEach(className => {
  console.log(className)
})
// one
// two

Replace

This method is a bit of an odd one, but can be useful in certain scenarios. The replace method takes two class names and will replace the first class name with the second class name only if the first class name is already on the element. This method will also return true if the replace was successful or false if the element does not contain the class to be replaced. Here is an example to showcase how this works.

element.classList.replace("one", "two")

This is the same as the following.

if (element.classList.contains("one")) {
  element.classList.remove("one")
  element.classList.add("two")
}

This method doesn’t have too many uses, but if you need to progress from one class to another, for example in a counter or multi-part form, then this would be the perfect use case.

Conclusion

That is everything you need to know about classList. Not all these methods will be used in every project you write, but knowing they exist will help you write cleaner and more maintainable code.