1
00:00:00,210 --> 00:00:06,750
The previous lesson we saw how he can manipulate attributes and we added a class attribute within the

2
00:00:06,750 --> 00:00:11,100
element, and we also were able to set that class attribute.

3
00:00:11,130 --> 00:00:17,970
Now, there is a better way in order to update and manipulate classes using JavaScript in the JavaScript

4
00:00:17,970 --> 00:00:21,360
Dom, we can remove, we can toggle or we can replace, we can add.

5
00:00:21,630 --> 00:00:27,510
There's a lot of stuff that we can do using the class list method so we can check to see if a class

6
00:00:27,930 --> 00:00:34,170
exists by doing selecting the element and then using classless method and then the method within the

7
00:00:34,170 --> 00:00:34,980
class list.

8
00:00:34,980 --> 00:00:39,420
We've got ability to check to see if contains and it contains is there.

9
00:00:39,430 --> 00:00:45,790
So if this class is available, what will happen is we will be returning back boolean value of true.

10
00:00:46,020 --> 00:00:49,020
This gives us the ability to check if classes exist.

11
00:00:49,330 --> 00:00:53,210
There's also great examples here at the Mozilla Developer Network.

12
00:00:53,220 --> 00:00:56,040
You can remove, you can add, you can toggle.

13
00:00:56,160 --> 00:00:59,210
And also there's contains the one that we just looked at.

14
00:00:59,550 --> 00:01:05,190
So we've got quite a few samples here that we are looking at where we're selecting elements from the

15
00:01:05,190 --> 00:01:09,250
body and we're checking to see if it has a class of first.

16
00:01:09,540 --> 00:01:11,840
So this is going to return back that boolean value.

17
00:01:12,090 --> 00:01:14,120
We can also use that in a condition.

18
00:01:14,490 --> 00:01:20,850
So with the Boolean values, if it's true or false, then if it's true, we can execute a block of code

19
00:01:20,850 --> 00:01:21,590
with a condition.

20
00:01:21,930 --> 00:01:23,150
So that's really useful.

21
00:01:23,460 --> 00:01:30,900
Also, we can select classes to add, remove toggle and we also have replaced as well there.

22
00:01:30,900 --> 00:01:33,020
We can update class list content.

23
00:01:33,120 --> 00:01:35,180
So there is a challenge to this lesson.

24
00:01:35,340 --> 00:01:43,560
So loop through all of the list items and toggle the class of test one remove class of test to replace

25
00:01:43,650 --> 00:01:51,750
class text with text three, add class of test for set, enter text of class name if class initially

26
00:01:51,750 --> 00:01:52,170
exists.

27
00:01:52,380 --> 00:01:54,990
So I know there's quite a bit that I just mentioned there.

28
00:01:55,140 --> 00:02:00,350
So basically at the end you're going to turn this HTML into this.

29
00:02:00,570 --> 00:02:07,020
So adding in all of these classes, as we iterate through all of those elements and then outputting

30
00:02:07,020 --> 00:02:12,150
into the console, you see that we've got the boolean values if the class exists.

31
00:02:12,330 --> 00:02:17,820
So we've got true, true, false, false, true, true, false for each one of these elements.

32
00:02:17,970 --> 00:02:23,670
And you can see that coincides with the first one is has a class, the first two have a class, the

33
00:02:23,670 --> 00:02:24,770
next two are false.

34
00:02:24,780 --> 00:02:28,080
So they don't have a class, the next to do have class.

35
00:02:28,080 --> 00:02:28,770
So they're true.

36
00:02:28,890 --> 00:02:31,170
And then the last one is false as well.

37
00:02:31,380 --> 00:02:33,420
Here's a quick glimpse at the code snippet.

38
00:02:33,630 --> 00:02:38,730
You can pause the video, try this out for yourself, and I'll show you a solution and walk you through

39
00:02:38,730 --> 00:02:40,220
the solution coming up.

40
00:02:40,230 --> 00:02:45,720
So we're going to use that same HTML that we used before where we've got all of the list items and some

41
00:02:45,720 --> 00:02:48,650
of them have classes, as we just saw within the example.

42
00:02:48,900 --> 00:02:51,450
So the first thing to do is make our selection.

43
00:02:51,460 --> 00:02:59,040
So we've got our list items using document and then query selector all select all the elements with

44
00:02:59,040 --> 00:03:00,690
a tag of list item.

45
00:03:00,810 --> 00:03:07,590
And just to make sure that we do have our list, we can log it out into the console, will refresh the

46
00:03:07,590 --> 00:03:09,930
page and see that we do have our Nautilus.

47
00:03:09,930 --> 00:03:13,500
So we've got all seven there, so ready to make some updates to them.

48
00:03:13,980 --> 00:03:20,370
So next, we want to loop through all of the list items or use for each loop in order to do that, selecting

49
00:03:20,370 --> 00:03:26,120
out the element, call it L and then also the index value if we need the index value.

50
00:03:26,250 --> 00:03:33,300
So as we loop through each one of the elements, we can see the element as well as L, and we can also

51
00:03:33,300 --> 00:03:36,360
see the class name value of that object.

52
00:03:36,870 --> 00:03:41,490
So we see that we get all of the class is being returned back as class name.

53
00:03:41,790 --> 00:03:44,040
And if they don't, there's just blank.

54
00:03:44,250 --> 00:03:47,100
So you can use this as well within a territory operator.

55
00:03:47,370 --> 00:03:54,120
So updating the element, text content, we can use a ternary operator where we're checking to see if

56
00:03:54,120 --> 00:03:57,480
L has a class name value.

57
00:03:57,690 --> 00:04:03,330
And if it does, then we output as text content that element class name.

58
00:04:03,660 --> 00:04:07,110
Otherwise we're going to just output no class.

59
00:04:07,410 --> 00:04:13,560
So we refresh, we see the ones that did have a class of first that gets output and the ones that don't

60
00:04:13,560 --> 00:04:16,170
have a class that gets put as no class.

61
00:04:16,440 --> 00:04:22,110
And also if you add in additional classes here and if you refresh it, you see that it lists.

62
00:04:22,110 --> 00:04:25,890
So all of the class is that available within the class name.

63
00:04:26,040 --> 00:04:29,670
So class name doesn't just list out the one, it lists all of them.

64
00:04:29,910 --> 00:04:33,600
And if you want to manipulate them, update those classes.

65
00:04:33,600 --> 00:04:40,980
We can use class list and we've got some methods that are contained within class list where we can add

66
00:04:40,980 --> 00:04:41,490
a class.

67
00:04:41,490 --> 00:04:44,180
So we just have to specify the name of the class that we're adding.

68
00:04:44,400 --> 00:04:50,340
So when we refresh and going into the elements, so make this bigger, going into the elements, you

69
00:04:50,340 --> 00:04:53,580
see, they've all had the class of test added.

70
00:04:53,580 --> 00:04:57,600
Erm so now they all have a class of at least one class of test in there.

71
00:04:57,930 --> 00:04:59,490
You can also toggle.

72
00:04:59,610 --> 00:05:06,630
Classes and the way that Torgau works is it will add it if it's not there and remove it if it is there.

73
00:05:06,780 --> 00:05:10,670
So if we do toggle in this case, we can do test one.

74
00:05:10,950 --> 00:05:14,100
So if it already has test one, it will remove it.

75
00:05:14,290 --> 00:05:16,720
And if it doesn't have test one, then it will add it in.

76
00:05:16,890 --> 00:05:19,470
And this is the case for most of them where it's just adding it in.

77
00:05:19,650 --> 00:05:25,620
If you want to try it with first, you can do that as well and it will add in first the ones that have

78
00:05:25,620 --> 00:05:27,360
it and the other ones that don't have it.

79
00:05:27,480 --> 00:05:32,550
And if you do read, you're actually going to be able to see the class of red is added into all the

80
00:05:32,550 --> 00:05:36,020
ones that didn't have it and removed from the one that did have it.

81
00:05:36,240 --> 00:05:39,840
So let's just switch this back to test one, because that was the objective.

82
00:05:40,080 --> 00:05:44,670
There's also class list and we can remove classes.

83
00:05:44,970 --> 00:05:48,420
So this is a really nice and useful one as well.

84
00:05:48,430 --> 00:05:54,320
So if you want to force a remove, then you can force removing of the class.

85
00:05:54,570 --> 00:05:59,040
And in this case, I think the only one that we do have is test so or first.

86
00:05:59,220 --> 00:06:04,980
So you can see we're removing out all the ones that had first and we're eliminating those so we can

87
00:06:04,980 --> 00:06:08,520
leave that one as is, because it's not going to affect our final output.

88
00:06:09,090 --> 00:06:15,290
And we also have an option for a class list and we can replace classes.

89
00:06:15,660 --> 00:06:22,410
So selecting and to see if we do have a class of first and if we do, then we can replace it with a

90
00:06:22,410 --> 00:06:23,370
class of test.

91
00:06:23,520 --> 00:06:26,060
And I'll comment this one out so we don't remove them.

92
00:06:26,370 --> 00:06:34,140
And as you can see now, the ones that did have first now they have a class of test three and removing

93
00:06:34,140 --> 00:06:36,300
out all of them that have test.

94
00:06:36,330 --> 00:06:37,860
So that includes all of them.

95
00:06:38,010 --> 00:06:41,250
And simply we're replacing test with test three.

96
00:06:41,260 --> 00:06:42,720
So that was another one of the objectives.

97
00:06:43,080 --> 00:06:46,760
And we can console, log and check to see.

98
00:06:46,770 --> 00:06:55,410
So using class list once again, we can check to see if it contains a class and we need to specify which

99
00:06:55,410 --> 00:06:56,860
class we're looking for.

100
00:06:57,240 --> 00:06:59,550
So it's in this case we're going to look for first.

101
00:07:00,120 --> 00:07:01,680
So we're looking the console.

102
00:07:01,980 --> 00:07:04,230
You can see we've got being returned back.

103
00:07:04,410 --> 00:07:07,560
So we're checking to see if it contains the class.

104
00:07:07,860 --> 00:07:14,190
And if it does, then we're outputting either true or false or putting a boolean value.

105
00:07:14,200 --> 00:07:16,980
So that's the statement there that's doing this one.

106
00:07:16,990 --> 00:07:18,310
So this is the one that's additive.

107
00:07:18,630 --> 00:07:25,010
So going back into the console, we also wanted to add one more class to the class list.

108
00:07:25,050 --> 00:07:27,480
So again, class list and add.

109
00:07:27,690 --> 00:07:30,660
And in this case, we're adding test four.

110
00:07:30,870 --> 00:07:37,080
And this should create the same list as we had within our objective and our console.

111
00:07:37,080 --> 00:07:41,450
Logout the entire class list as well as the list items.

112
00:07:41,460 --> 00:07:47,340
So now we've got the output that we were looking for, as well as when we look into the elements, you

113
00:07:47,340 --> 00:07:52,200
can see all of the elements now have the appropriate class is added into them.