Access and change classes

- [Instructor] Working with element properties like innerHTML is easy enough because we can write directly to them. But what do we do when we have an element that is read-only, like classList? Well, in the case of these read-only elements, you typically have methods you can use to interact with them directly. So for classLists, we have five methods: add, remove, item, toggle, and contains. Let's return to that example from the previous movie for a moment, and see how these methods work on the property. First, I need an element that has a classList, so I say document.querySelector and I remember that masthead has two classes.

Here you see it, masthead and clear. Now I can use a method on this property to change it. So let's say I want to add an additional class. I go to document.querySelector(".masthead").classList and say add, and add a name from new class, return, and if I hit the up key on my keyboard I can scroll through all the different commands I've already passed and I go back to classList and run it again. Now we have masthead, clear, and new class.

You can also see this over here in elements: masthead, clear, and new class. I can also remove a specific class. So if I go back here I can say document.querySelector(",masthead").classList.remove and I want to take away clear. Go back to elements, and clear has been removed, so now I just have masthead and new class. Item, you've already seen, this is when you go into the list, find out what the index number is and call for that particular item.

So if I want new class, which is now item number two, I call for item number one. Toggle allows you to specify a class you want to turn on and off. To make this work we have to target the element using a different class because we'll remove the class that we're targeting. So if I go document.querySelector and I target new class, I get the same element. Then I say classList.toggle and now I can toggle on and off masthead.

And when I do that, you can see it happening in the browser up here, so I'll hit enter, the class masthead is removed from the header and it starts looking weird. Then I just reapply it and it comes back. And you can see in the console here, the first time I run the method I get the response false, meaning we've removed the class name. The second time, I get the response true, meaning we've added the class name back in. The final method, contains, checks if a specified class value exists in the class attribute of the element.

So I can use it to actively see if I have a class in the element without actually doing anything to it. Let's see if masthead exists. So I'll say document.querySelector and instead of toggle I'll say contains, run it, true. Then if I go and toggle masthead off, and run contains again, I get false. Pretty much all these read-only properties for elements have some sort of method you can use to interact with it.

And that's why this MDM page is so important. There is no way you'll remember every single property for every single element, and there is definitely no way you'll remember every single method for every single property that you can apply to elements. Using this reference page, you'll quickly be able to figure out what you can do with different types of elements when you need that specific functionality.