classList

By thevirtuoid on June 15, 2021 • ( Leave a comment )

Hi everyone, and welcome to another spine-tingling adventure in Boring JavaScript! Today, we take a look at the classList property – more specifically, the DOMTokenList that is stored in the classList property. Which means – we take a look at the classList property.

Don’t like to read? Then watch our video!

I Have No Class

When you are working with HTML elements, the preferred method of adding stylings to the element is adding or removing classes from the “class” attribute (after, of course, defining them in your stylesheet). In olden days, you literally had to get the “className” property of the HTML element and make the changes on your own. Yuck.

But now there is an easier way. Each HTML element comes with a property called “classList”, which contains a DOMTokenList of all the classes associated with that element. And that DOMTokenList comes with a variety of methods to make adding or removing classes quick and easy. Let’s take a look at a few of the methods.

The Adding Machine

Adding a class to an element is as simple as calling … well … add(). Let’s take a look:

const zoo = document.getElementById('zoo');
zoo.classList.add('snake');
zoo.classList.add('snake', 'bear', 'gorilla');

And that’s it! Line 1 points to an HTML element in our document. Line 2 adds one class to the ‘zoo’ element, and Line 3 adds three classes to the element.

This shows you can add multiple classes, but what if you don’t know how many classes you’re going to add? If you don’t know the number of classes, you can’t specify them as arguments. JavaScript has a solution for that, and it’s called a Destructuring Assignment. Basically, all the elements of an array will be split into arguments for you automatically. Let’s see some code:

const zoo = document.getElementById('zoo');
const animals = ['snake, 'bear', 'gorilla');
zoo.classList.add('flamingo', ...animals);

Line 3 shows the destructuring assignment. Each element of the array “animals” will be used a a single argument passed to the add() method. It’s the same as saying this:

const zoo = document.getElementById('zoo');
zoo.classList.add('flamingo', 'snake', 'bear', 'gorilla');

Now you can place your classes in an array and add them automatically.

The Subtracting Machine

We can add. How about removal? That’s using the remove() method. Let’s look at some code:

const zoo = document.getElementById('zoo');
zoo.classList.remove('snake');
zoo.classList.remove('snake', 'bear', 'gorilla');

Looks familiar, right. The same type of arguments used for the add() method works here, too. If the class you specify doesn’t exists, then nothing happens.

And you can use the destructuring assignment here, too.

const zoo = document.getElementById('zoo');
const animals = ['snake, 'bear', 'gorilla');
zoo.classList.remove('flamingo', ...animals);

Political Flip-Flop

Many times you wish to simply add or remove a class based upon certain conditions – famously, if you want to ‘show’ or ‘hide’ an element. You can always detect if your class is there using the contains() method, then either add or subtract it based upon that condition.

But there is an easier way, using the toggle() method. Let’s take a look:

// zoo does NOT contain the 'bear' class. Trust me.
const zoo = document.getElementById('zoo');

// after the below, zoo will contain 'bear'
let bearAdded = zoo.classList.toggle('bear');
console.log(beadAdded);

// after the below, zoo will not contain 'bear'
bearAdded = zoo.classList.toggle('bear');
console.log(beadAdded);

/*  output:
true
false
*/

The toggle() method merely adds or removes the class from the element if it is already there or not – basically toggling the existence of that class. The value returned from the operation is a Boolean value on if the class is present on the classList or not, depending upon if it was added or removed.

And That’s Not All

As ‘classList’ is technially a “DOMTokenList”, there are a number of other functions you can perform with it, all because it is a ‘list’, like using iterations and what not. I suggest going to the Mozilla Developer Network docs on the subject and seeing what other fun things you can do.