The previous lesson we saw how he can manipulate attributes and we added a class attribute within the
element, and we also were able to set that class attribute.
Now, there is a better way in order to update and manipulate classes using JavaScript in the JavaScript
Dom, we can remove, we can toggle or we can replace, we can add.
There's a lot of stuff that we can do using the class list method so we can check to see if a class
exists by doing selecting the element and then using classless method and then the method within the
class list.
We've got ability to check to see if contains and it contains is there.
So if this class is available, what will happen is we will be returning back boolean value of true.
This gives us the ability to check if classes exist.
There's also great examples here at the Mozilla Developer Network.
You can remove, you can add, you can toggle.
And also there's contains the one that we just looked at.
So we've got quite a few samples here that we are looking at where we're selecting elements from the
body and we're checking to see if it has a class of first.
So this is going to return back that boolean value.
We can also use that in a condition.
So with the Boolean values, if it's true or false, then if it's true, we can execute a block of code
with a condition.
So that's really useful.
Also, we can select classes to add, remove toggle and we also have replaced as well there.
We can update class list content.
So there is a challenge to this lesson.
So loop through all of the list items and toggle the class of test one remove class of test to replace
class text with text three, add class of test for set, enter text of class name if class initially
exists.
So I know there's quite a bit that I just mentioned there.
So basically at the end you're going to turn this HTML into this.
So adding in all of these classes, as we iterate through all of those elements and then outputting
into the console, you see that we've got the boolean values if the class exists.
So we've got true, true, false, false, true, true, false for each one of these elements.
And you can see that coincides with the first one is has a class, the first two have a class, the
next two are false.
So they don't have a class, the next to do have class.
So they're true.
And then the last one is false as well.
Here's a quick glimpse at the code snippet.
You can pause the video, try this out for yourself, and I'll show you a solution and walk you through
the solution coming up.
So we're going to use that same HTML that we used before where we've got all of the list items and some
of them have classes, as we just saw within the example.
So the first thing to do is make our selection.
So we've got our list items using document and then query selector all select all the elements with
a tag of list item.
And just to make sure that we do have our list, we can log it out into the console, will refresh the
page and see that we do have our Nautilus.
So we've got all seven there, so ready to make some updates to them.
So next, we want to loop through all of the list items or use for each loop in order to do that, selecting
out the element, call it L and then also the index value if we need the index value.
So as we loop through each one of the elements, we can see the element as well as L, and we can also
see the class name value of that object.
So we see that we get all of the class is being returned back as class name.
And if they don't, there's just blank.
So you can use this as well within a territory operator.
So updating the element, text content, we can use a ternary operator where we're checking to see if
L has a class name value.
And if it does, then we output as text content that element class name.
Otherwise we're going to just output no class.
So we refresh, we see the ones that did have a class of first that gets output and the ones that don't
have a class that gets put as no class.
And also if you add in additional classes here and if you refresh it, you see that it lists.
So all of the class is that available within the class name.
So class name doesn't just list out the one, it lists all of them.
And if you want to manipulate them, update those classes.
We can use class list and we've got some methods that are contained within class list where we can add
a class.
So we just have to specify the name of the class that we're adding.
So when we refresh and going into the elements, so make this bigger, going into the elements, you
see, they've all had the class of test added.
Erm so now they all have a class of at least one class of test in there.
You can also toggle.
Classes and the way that Torgau works is it will add it if it's not there and remove it if it is there.
So if we do toggle in this case, we can do test one.
So if it already has test one, it will remove it.
And if it doesn't have test one, then it will add it in.
And this is the case for most of them where it's just adding it in.
If you want to try it with first, you can do that as well and it will add in first the ones that have
it and the other ones that don't have it.
And if you do read, you're actually going to be able to see the class of red is added into all the
ones that didn't have it and removed from the one that did have it.
So let's just switch this back to test one, because that was the objective.
There's also class list and we can remove classes.
So this is a really nice and useful one as well.
So if you want to force a remove, then you can force removing of the class.
And in this case, I think the only one that we do have is test so or first.
So you can see we're removing out all the ones that had first and we're eliminating those so we can
leave that one as is, because it's not going to affect our final output.
And we also have an option for a class list and we can replace classes.
So selecting and to see if we do have a class of first and if we do, then we can replace it with a
class of test.
And I'll comment this one out so we don't remove them.
And as you can see now, the ones that did have first now they have a class of test three and removing
out all of them that have test.
So that includes all of them.
And simply we're replacing test with test three.
So that was another one of the objectives.
And we can console, log and check to see.
So using class list once again, we can check to see if it contains a class and we need to specify which
class we're looking for.
So it's in this case we're going to look for first.
So we're looking the console.
You can see we've got being returned back.
So we're checking to see if it contains the class.
And if it does, then we're outputting either true or false or putting a boolean value.
So that's the statement there that's doing this one.
So this is the one that's additive.
So going back into the console, we also wanted to add one more class to the class list.
So again, class list and add.
And in this case, we're adding test four.
And this should create the same list as we had within our objective and our console.
Logout the entire class list as well as the list items.
So now we've got the output that we were looking for, as well as when we look into the elements, you
can see all of the elements now have the appropriate class is added into them.