The Vanilla JavaScript classList is one of the best features to know when working with JavaScript, in essence it's a read-only property that returns something we call a DOMTokenList this contains the classes on the element we call classList on.
Reading a Elements ClassList with Vanilla JavaScript
To read a classList we can use the following markup:
<div class="class-one class-two class-three" id="getMe">Fuu</div>
Then for the JavaScript we can use the following code to get all classes.
var element = document.getElementById('getMe');
console.log(element.classList);
// DOMTokenList(3) ["class-one", "class-two", "class-three", value: "class-one class-two class-three"]
As you can see it returns a DOMTokenList with the three classes in it.
Off-course it's cool to retrieve this, but it doesn't do much, so let's see what makes it awesome 🤩.
Adding a class to a element
To add a element we simply do the following Vanilla JavaScript magic.
element.classList.add('class-four');
console.log(element.classList);
// DOMTokenList(4) ["class-one", "class-two", "class-three", "class-four", value: "class-one class-two class-three class-four"]
As you can see the element now has a fourth class.
Removing a class from a element
Removing is basically the same as add, but then we use the `remo
js
element.classList.remove('class-one');
console.log(element.classList);
// DOMTokenList(3) ["class-two", "class-three", "class-four", value: "class-two class-three class-four"]
We are removing the class called class-one from our element.
Toggling a class on an element
Sometimes you want to toggle a class on an element, think about making it visible or hidden when you click it.
We can achieve this with the following code:
js
element.classList.toggle('visible');
console.log(element.classList);
// DOMTokenList(4) ["class-two", "class-three", "class-four", "visible", value: "class-two class-three class-four visible"]
It will add the class visible if it doesn't exist and remove it if it already existed.
Check if an element contains a certain class
If we want to check if our element contains a certain class we can use the following snippet:
js
console.log(element.classList.contains('visible'));
// true
It will return true or false and we can use this in if...else statements.
Adding and removing multiple classes
The ClassList can even accept a array of classes to be removed or added.
`js
element.classList.remove('class-two', 'class-three', 'class-four');
console.log(element.classList);
// DOMTokenList ["visible", value: "visible"]
element.classList.add('two', 'three', 'four');
// DOMTokenList(4) ["visible", "two", "three", "four", value: "visible two three four"]
`
Replacing a class
To replace a existing class we can use the following code:
js
element.classList.replace('four', 'one');
console.log(element.classList);
// DOMTokenList(4) ["visible", "two", "three", "one", value: "visible two three one"]
As you can see this can be very useful for making element animate or even show and hide.
I hope you learned something new about the Vanilla JavaScript classList function, as always feel free to play around with this codepen.
See the Pen Vanilla JavaScript classList by Chris Bongers (@rebelchris) on CodePen.
Browser Support
The Vanilla JavaScript classList has good browser support.
IE doesn't know how to handle the multiple classes very well, but we can even polyfill this back to IE6.
Thank you for reading, and let's connect!
Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Top comments (0)