FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.3 Manipulating CSS Classes With the DOM API

Once again, jQuery's influence on the modern DOM API is apparent—this time in the relatively new classList property. I'll show you how to use its various methods to add, remove, and toggle classes on an element.

5.3 Manipulating CSS Classes With the DOM API

In the previous lesson, we looked at the querySelector and querySelectorAll methods. Those were inspired by jQuery's functionality that allowed us to find elements in the document based upon CSS selectors. Well, in this lesson, we are going to look at something else inspired by jQuery. And that is manipulating the CSS classes that are applied to an element. And it's very much like what we looked at with jQuery, the addClass, removeClass, and toggleClass methods. We have something very similar in the standard DOM. Well, let's first of all do some research. Because a big part of being a developer in general is being able to find information on what you're looking for. So a huge resource for web development, especially for JavaScript, DOM, CSS, and anything like that, is called Mozilla Development Network, or MDN, for short. And, if you use MDN in your search query then the first results that you're going to see are from that Mozilla Developer Network. So, let's do a search for classList. Because that is the object that we are going to be looking at in this lesson. And the first item is Element.classList. So, let's go to that page. And there's a lot of information here. The main information about what we are looking at is here in the middle, but we can also see a bunch of properties and things about the element object itself. So if we wanted to reference anything like that, we can also see the methods of our classList. And you can see that we have the add method, the remove method. We have a method called item for returning a class based upon the index of that class. And then we have the toggle method and contains method. We can usually see some examples. And there's a polyfill. So, for browsers that don't support classList, which are really old, then you could use a polyfill like this. But then you can also see the browser compatibility. Now, the browser compatibility is not always 100% correct. But it usually is. And we can see that the classList is supported by everything as far as basic support is concerned. The toggle method is not supported by Internet Explorer. In fact, none of those are supported by Internet Explorer. But that's really not a surprise because Microsoft stopped development of Internet Explorer, instead we have Edge. So, whenever you want to do any type of research regarding JavaScript's, DOMS, CSS, MDN is the place that you want to go. Now, before we begin looking at the classList object, I want to show you the className property, well, show you. I want to tell you about the className property. We've had this property for a very long time. And it maps directly to the class attribute on the element. So, whatever value you have assigned to an elements class, that is going to be represented as the className property. There's no organization. There's no adding or removing or toggling. Unless if you write the code yourself to do those things, in which case, you will be an a world of hurt. So if you just quickly set the class of an element, you can use className. If you want to quickly clear all of the classes applied to an element, you can use the className and then, assign it an empty string. But if you wanted to toggle classes, add, remove, or anything like that, well, adding's a little easy. Because you can just say element className +=. And then whatever class you want to add. But you do have to be sure to add spaces in between the classes. And of course, if you wanted to remove or toggle then, that's a little difficult. So, if you want to do more than just setting a simple class, you can use the classList. And we have several methods. The first is called add. So, if we wanted to add the important-text class, then that is going to add that class to our LINRP elements. So, there you go. Although, let's comment out the line of setting the background color to silver. So we have bolded and underlined text. Now, if we try to do what we did with jQuery and just use a space and then the value of another class, well, we are going to see that nothing happens. There is no class that is applied to this elements. In fact, if we inspect this, let's find the p elements right there. We can see that there is no class whatsoever. So, that is not a supported feature. However, instead of separating the classes with the space, what we can do is pass in another argument that contains the class that we want to add. So, if we go back to the browser and refresh the page, we now see that both of those classes have been applied to the element. So, we have add then it make sense that we have a remove method. Let's remove the red class. And it works the same way as the add class. If we wanted to remove multiple classes then we just pass in a separate argument. But in this case, we're just going to remove the red class. In which case, we end up with just text that is bold and underlined. We have the toggle method. So, instead of add a class, remove class, and toggle class, we have classList. And then add/remove or toggle. So in this case, we're going to toggle the important-text class. And this is of course going to remove that class so that we have just normal text. So, it's the same ideas and concepts that jQuery introduced with the addClass, removeClass, and toggleClass, we just access that functionality a little bit differently. Now, there are two methods. Actually, there's three methods. Let's get rid of the call to remove, as well as toggle. So that we have both red and important-text. If we wanted to clear all of the classes then we could call the clear method, can we? At one time, I thought we did, we do. We have a clear method. And if we look at MDN, it's not listed here. So, it's not a standard method, but there are some browsers that will support that clear method. Now, I don't encourage you to use methods that are not standard. Because that means it could or could not work in the future. So, if you wanted to clear the classes then your better option would be to use the className property. Okay, so let's use the item method. So we're going alert element.classList. And we're going to use the item method. And then we need to pass in the index of the class that we want to retrieve. So, if we wanted to get the first class that is applied to the element, we would use the index as 0. If we wanted to get the second class, we would use 1. The third class 2. And so on and so forth. So, let's receive, or retrieve, rather, the first class. So, if we head onto the browser and refresh. We see that the first class is important-text. And we're going to see three times. Because we are iterating over our node list and executing this function for each one of those elements. So, we saw that we could retrieve a class with the given index. We can also check to see if a particular class is in the classList with the contains method. So if we pass in red here, we're going to see true. Because the red class is in each of these classLists. So, we'll see true if we removed the red class. Then we would see false in these alert boxes. So the same ideas and concepts that we saw in jQuery are here applied to the classList. It requires a little bit of extra typing, but, really, that's okay, because it's not that bad. And it's a small price to pay for some very, very useful functionality.

Back to the top