Menu Home

classList

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.

The Video

We have a video on the subject above if you prefer to watch instead of read.

Shamless Plug

Check out all our videos at: https://www.boringjavascript.com

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript HTML

Tagged as:

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: