As we've looked at examples of changing the class of a node in the DOM, we've only dealt with adding a single class to an element using the class name attribute, or using the set attribute. Well, HTML allows, including more than one class for a particular element. However, we haven't been able to do that with the methods we have used thus far. html5 introduced a new attribute is called a class list attribute. And when you display class list, it shows you the classes that are associated with a particular element. However, more important are the methods that are included with the class list attribute.
You have an add remove toggle length, and contains method that you can use on class lists. And this allows you to add more than one class to a particular node in the DOM. So if you find the need to do that, or the modifications you're making, you don't want to remove the previous class that is there, you just want to add to it, this would be the technique to use. So let's take a look at the class list attribute and what's available. Now remember, this was added with html5. So make sure you can support html5 in the browsers you're targeting.
Now, the same method for selecting the node is used. Once you have a node selected, you can then use the dot syntax to go to class list. Notice the L is uppercase, then dot again to access the methods that are a part of that. So the first one is add in an inside of parentheses you Put the class name as a string that will be added to that node. Remove, obviously would remove the class name, which you indicate inside a parentheses. Toggle does both add and remove.
So, if you use toggle if the class is already associated with that node, it will remove it. If it is not, it will add it. There is a length property that allows you to see how many classes are actually associated with this node. And then finally, there is a contains method that simply checks to see if the class exists on the note, and it will return either a true or a false. So once again, let's do some examples of these. We'll pull up our selecting exercise HTML page.
And I'm going to open the console and I have the console docs At the bottom of the page, we can see what happens. First off, I'm going to select a node, I'm going to use query selector again and do very similar to what I did in the previous movie. I'm gonna select the first span tag, but I need to type it correctly. I left out the document. reference, you guys probably caught that. Alright, now I have it.
Now let's first access class list. And look, it shows us a list of the classes that are already associated with that node. Now we want to add a new class to that. So I'm going to do node dot class list dot add and then inside of that I'm going to specify a nother class that I've created. This class is very simple, it simply defines a larger font size. That's all it does.
So when I press return, it will change the font size on that span tag. And notice the ID is the only part that's enclosed within the span tag, so we get a very large ind. Alright, let's go ahead and remove that using the class list dot remove method. We have to specify the class name again, and then it removes it. Now toggle, remember I said toggle does both add and remove. If the class already exists, it removes it.
If it doesn't exist, it adds it. So let's try that with our large font class again. So we removed it in our previous state So this should add it. Sure enough, the ID gets larger. Let's execute it again. Press the up arrow to bring the command back, press it again and this time it removes it.
Now, we can see that using the class list length property, and sure enough, we only have one class in there right now. So let's add another class and then we'll check length again. We'll add the large font back in again. And then up arrow to find all classes start linked, press return, and sure enough, we have to there. Now finally, the last method that's available on class list is the contains unless just see if it contains well Blue. No returns true and So sure enough it does.
So the class list added in html5 simply makes it easier to work with classes, because then you can add more than a single class to a node that you have selected from the DOM. The previous methods we we have looked at you're only able to deal with a single class. But there are many times you need to deal with multiple classes, and therefore a class list becomes very valuable. Alright, let's move on to the next topic.