Manipulate the DOM with the classList API

Damon Bauer
InstructorDamon Bauer
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

[00:00] I've set up a basic page with a few elements, and couple of style sheets. In our JavaScript, let's make a reference to our image by saying let image = document.getElementById("image"). We'll say let apply = document.getElementById("apply").

[00:19] This gives us a reference to our image, and a reference to our apply filter button that we...Let's call our apply button, and say apply.addEventListener, and listen for a click. Inside of that click event listener, we want to say image.classlist.add. I'm going to add a class of moon. You can see when I click the apply filter button, the moon filter was applied.

[00:49] Classlist.add also takes multiple arguments. If I wanted to add multiple classes, I could do that just by separating those by commas.

[00:56] I'll add another class of small here. Now when I click the apply filter button, you'll see the filter was applied, and the image gets a little bit smaller. Let's set up a reference to our reset button by saying let reset = document.getElementById("reset").

[01:15] Just like our apply button, we can add a click event listener on reset by saying reset.addEventListener. Inside of that, we can call image.classlist.remove. That's the exact same signature as add. We can remove moon, and we can remove small.

[01:38] If I click the apply filter button now, I'll see that those classes were added. When I click the reset button, those classes are removed. Instead of having two buttons to apply the filter, and then reset it, we can change classlist.add to classlist.toggle.

[01:53] In this case, I just want to toggle the move class. Now when I click apply filter, that class is added. When I click it again, it's removed. Toggle also takes a second parameter. If that second parameter evaluates to true, such as 1<2, classlist will try to toggle the class that you pass on each time it gets evaluated.

[02:13] Since we know 1<2, when we click apply filter, you'll see the moon class is added. If we click it again, the class is not removed, it's trying to be added again. Really, think of toggle as toggle on or toggle off, based on whether or not this second parameter is true or false.

[02:30] Let's add some code to our HTML that will let us know whether or not the moon filter is applied. We'll be concerned with the element with the ID of check. Let's create a function called updatecheck(). Inside of our function, we can store a reference to our check element by saying document.getElementById("check").

[02:54] Let's change the text of our check element by saying check.innerHTML, and set that equal to image.classlist.contains the class of moon. If that evaluates to true, we want to set the text to yes, otherwise we want to set it to no.

[03:12] Now all that's left to do is call our updatecheck() method, and each time one of our buttons is pressed. You'll see when I click the apply moon filter button, the text changes to yes. If I click reset, it changes back to no.

Thomas
Thomas
~ 8 years ago

I guess you can have only one button named "toggle filter" (or even a dynamic button text which changes depending on whether the class is applied or not) and then just use classList.toggle('filtername') without a second attribute, which is essentially how .toggle works. (just saying it because it's not clear from the video)

Markdown supported.
Become a member to join the discussionEnroll Today