One peculiar aspect of the class attributes is that you can add not just one but as many classes as you want to any HTML element. So, modifying classes by using dot notation or even the set attribute method is not convenient if the element has more than one class. Thankfully, HTML5 adds a new property to the dom called a class list. This is a new object that is going to be added to all the nodes in your DOM. It allows you to do jQuery like modifications, class attributes. So for example, you can add, remove, or toggle classes.
Unfortunately, it has pretty lousy support in Internet Explorer. So if we check caniuse.com, you could see that it's only supported in IE 10. As I mentioned, you can use the add method of classList to add a class without disrupting any existing classes in the document. You can use remove to remove a class without affecting any other existing classes. If you use the toggle method, it'll turn a class on or off. First time you call it, it'll add the class, the second time you call it, it'll remove it. You can also find out how many classes an element currently has, as well as whether or not an element contains a specific class.
So, let's take a look at this in a real document. So, here I am on the page for my website and I'm going to scroll down to this area right here and I'll pull up the console. And I'm going to hit the magnifying glass to access this first element. So, here we can see the path to that element. So, first I'm going to create a variable and assign it to this down element. I'm going to target an image in the div that has the artist list class.
Let's check that out my node and there it is. We've got the right node which is that element. And if I want to add a class, all I need to do is save my node.classlist, and then use the add method, and pass it a class. So, that added the class faded, you can see it right here in the breadcrumbs. And if I pull up my node again, you can see that it's there as well. So, if you use add again and add a different class, you can see that both classes are added.
You can see a red there in the breadcrumbs, and you can also see it if we call up the node. To remove a class, you use remove. Now, it only has the faded class. Let's go ahead and remove that one as well. If you use toggle, it'll turn a class on and off, so let's check that out. Let's toggle right here, and we'll call a class called hidden. First on my call it, it hides it, it returns also a true value.
And if I call it again, it shows it and it returns a false. You can also use contains to find out whether or not the element has a class, since we just took off the class hidden it returns false. This is a really handy way and super similar to the way jQuery lets you manage your class names. It's so convenient that it's worth using a Polyfill to give you access to it right now. So, you may want to check out this GitHub page for a good Polyfill that allows you to use this in older browsers.
- What is the DOM?
- Choosing and isolating elements
- Traversing up and down DOM nodes
- Changing HTML attributes
- Modifying elements as text
- Creating and appending nodes
- Cloning and removing nodes
- Adding a bubbling event listener
- Adding and resizing images
- Handling clicks