1
00:00:05,460 --> 00:00:06,810
In this video.

2
00:00:06,840 --> 00:00:16,620
Let's talk about changing elements, proposals, which simply means that we can use JavaScript with

3
00:00:16,620 --> 00:00:19,800
the help of the DOM to change any element.

4
00:00:19,800 --> 00:00:28,050
Properties and properties can be any CSS properties that can be used on an element, for example, background

5
00:00:28,050 --> 00:00:35,220
colour, font size and even we can go ahead and remove content from the page.

6
00:00:35,400 --> 00:00:42,960
So let's see how we can use JavaScript with the help of the DOM to change any properties or we can add

7
00:00:42,960 --> 00:00:45,060
properties to an element.

8
00:00:45,210 --> 00:00:49,650
Well, this video is a continuation of the previous section.

9
00:00:49,650 --> 00:00:54,480
That is how we can select an element that is the first step.

10
00:00:54,480 --> 00:00:57,690
So after selecting, what do we do with it?

11
00:00:57,900 --> 00:01:05,090
So after selecting, we need to use JavaScript to add content dynamically or remove content depending

12
00:01:05,099 --> 00:01:06,240
how we want it.

13
00:01:06,240 --> 00:01:13,470
So let's move step by step and let's start with how we can use JavaScript with the help of the DOM to

14
00:01:13,470 --> 00:01:16,230
add or change element's properties.

15
00:01:16,530 --> 00:01:25,350
Before we get into that, remember, all selected element has a property core style which represents

16
00:01:25,380 --> 00:01:26,340
CSS.

17
00:01:26,430 --> 00:01:34,410
So with this property or object we can now change in this case property of an element.

18
00:01:34,440 --> 00:01:37,170
That's one thing we need to bear in mind.

19
00:01:37,530 --> 00:01:39,690
So back to Visual Studio code.

20
00:01:39,690 --> 00:01:45,480
As always, I have created a new folder with few lines of HTML.

21
00:01:45,960 --> 00:01:53,250
Again, I'll provide this template for you, download it, extract it and open using your preferred

22
00:01:53,250 --> 00:01:54,180
good editor.

23
00:01:54,960 --> 00:01:58,950
So you can go ahead and open it using your life saver.

24
00:01:58,980 --> 00:02:02,880
So let's go through the syntax for this particular HTML.

25
00:02:02,970 --> 00:02:11,970
We only have h one and the underline and p tag and in there we have a tag inside it and another H one

26
00:02:11,970 --> 00:02:15,210
which is called what is coding and P tag down here.

27
00:02:15,360 --> 00:02:22,140
And we have lists of programming languages of which we use other tag to list them as tags.

28
00:02:22,140 --> 00:02:25,650
And I have connected my JavaScript with it.

29
00:02:26,340 --> 00:02:27,660
So the same thing.

30
00:02:27,660 --> 00:02:30,930
I've connected my CSS as that.

31
00:02:30,930 --> 00:02:31,710
Perfect.

32
00:02:31,710 --> 00:02:33,300
So back to business.

33
00:02:33,300 --> 00:02:37,860
Well, how can we use JavaScript to change this property?

34
00:02:38,130 --> 00:02:42,540
You can see that for this particular website there is no stylin.

35
00:02:42,570 --> 00:02:47,040
This is a default style and given to us by the browser.

36
00:02:47,310 --> 00:02:53,940
So let's see how we can use JavaScript to add some CSS to this particular element.

37
00:02:54,060 --> 00:03:02,400
So our target for this particular video is, number one, manipulating element style that is changing

38
00:03:02,400 --> 00:03:06,720
properties of an element, or we can access to an element.

39
00:03:07,020 --> 00:03:12,780
And after that we will talk about working with CSS methods that is classless.

40
00:03:13,140 --> 00:03:15,540
Add, remove or toggle.

41
00:03:15,660 --> 00:03:21,840
This is the method that you are going to use, so please pay attention about this.

42
00:03:22,260 --> 00:03:27,060
The next target is manipulating element content.

43
00:03:27,060 --> 00:03:31,530
Meaning how can we add content to the page?

44
00:03:31,530 --> 00:03:35,830
Or how can we remove element content from the page?

45
00:03:35,970 --> 00:03:42,840
And we can do that one using this method called in HTML and text content.

46
00:03:42,900 --> 00:03:47,130
As you move on, we will differentiate between these two methods.

47
00:03:47,160 --> 00:03:49,800
So let's move step by step.

48
00:03:49,830 --> 00:03:51,530
Let's start with what?

49
00:03:51,540 --> 00:03:54,060
Manipulating element style.

50
00:03:54,180 --> 00:03:56,580
This is our first target.

51
00:03:56,580 --> 00:04:02,280
So beautiful comment and the same thing down here as that.

52
00:04:02,280 --> 00:04:03,870
So let's have some space here.

53
00:04:04,230 --> 00:04:05,070
Perfect.

54
00:04:06,150 --> 00:04:09,480
So what's going to be the first step?

55
00:04:10,260 --> 00:04:17,670
The first step is let's talk about when we say manipulating element style, what does it mean?

56
00:04:17,850 --> 00:04:25,770
Well, like I said, we can manipulate element style of an element using the style property.

57
00:04:26,250 --> 00:04:33,630
So the style property is going to help us to add some style or remove style to our element.

58
00:04:34,140 --> 00:04:39,140
And again, all selected elements have a style property.

59
00:04:39,150 --> 00:04:44,580
So let's have a look at the steps of adding or removing content to a page.

60
00:04:45,150 --> 00:04:48,360
So here is going to be our steps.

61
00:04:50,380 --> 00:04:51,310
Like that.

62
00:04:51,730 --> 00:05:02,500
So step number one is first is select the element we need to decide which particular element that we

63
00:05:02,500 --> 00:05:04,260
want to select or style.

64
00:05:04,270 --> 00:05:07,240
So let's move at a basic level.

65
00:05:07,240 --> 00:05:15,520
So let's say that we have a class of this one, say title, and now we want to select this particular

66
00:05:15,520 --> 00:05:18,130
H one and add some styling to it.

67
00:05:18,130 --> 00:05:26,350
So for this one, we can use any single selector method, whether I get element by ID or query selector,

68
00:05:26,350 --> 00:05:30,070
but because we use class, we are going to use query selector.

69
00:05:30,160 --> 00:05:35,710
So here we go, going to be const title element.

70
00:05:36,580 --> 00:05:45,640
The name can be anything is equal to document dot query selector and then because it's a class I will

71
00:05:45,640 --> 00:05:48,520
use period and then the class name.

72
00:05:48,850 --> 00:05:56,650
So if I console.log the title element, it will see that let's check the console.

73
00:05:56,860 --> 00:06:06,340
And now we see that we have selected that particular element and as we say, that all selected element

74
00:06:06,340 --> 00:06:08,200
has style property.

75
00:06:08,200 --> 00:06:11,890
So if I make use of dot style.

76
00:06:13,400 --> 00:06:14,780
Dot style.

77
00:06:14,840 --> 00:06:17,240
Check it out in the console.

78
00:06:17,270 --> 00:06:23,000
We are going to see some properties and you can see that this is CSS properties.

79
00:06:23,330 --> 00:06:26,810
But for this one, they are common casing, right?

80
00:06:26,810 --> 00:06:30,050
So this one represent the accent color of the elements.

81
00:06:30,050 --> 00:06:37,490
If you scroll down the commonly used ones like background color, you see we have it here is empty and

82
00:06:37,490 --> 00:06:41,880
we can also have the background image if you scroll down.

83
00:06:41,900 --> 00:06:45,050
Border, border size, they are common casing.

84
00:06:45,290 --> 00:06:46,550
I take note here.

85
00:06:47,060 --> 00:06:49,310
You can see that we also have the color.

86
00:06:49,310 --> 00:06:53,480
So we have all the CSS properties an element can have.

87
00:06:53,780 --> 00:06:55,760
So with that one be in mind.

88
00:06:55,760 --> 00:07:01,130
Now the next step is we want to hold our style to the element.

89
00:07:01,130 --> 00:07:06,110
So step number two is set style.

90
00:07:08,190 --> 00:07:09,720
To element.

91
00:07:10,020 --> 00:07:14,040
So here we go on the elements selected.

92
00:07:15,090 --> 00:07:23,880
We have this type of party dance style, and if I want to style, the color is going to be the color.

93
00:07:25,680 --> 00:07:32,890
Dot color and because it's an object, we can override or update or remove it.

94
00:07:32,910 --> 00:07:40,740
So for this one, we will say that style dot color is equal to the value red.

95
00:07:41,070 --> 00:07:48,090
So when I say it, let's see now indeed I have the first element being red.

96
00:07:48,660 --> 00:07:58,830
So I advise you to target the what is coding element, select it and then add any property you want.

97
00:07:58,860 --> 00:08:01,350
If you're finished, then let's continue.

98
00:08:04,240 --> 00:08:06,310
Well, I believe you are done with that.

99
00:08:06,310 --> 00:08:07,900
So let's proceed.

100
00:08:08,230 --> 00:08:15,340
Step number three is after selecting we can see that where I also want to move the color and it's pretty

101
00:08:15,340 --> 00:08:15,970
simple.

102
00:08:15,970 --> 00:08:21,430
Well so to remove it you copy this one, bring it down.

103
00:08:21,430 --> 00:08:24,400
Let's say remove the style elements.

104
00:08:25,630 --> 00:08:28,300
Remove style element.

105
00:08:29,710 --> 00:08:33,549
It's as easy as changing this one to empty string.

106
00:08:33,549 --> 00:08:38,120
So when I save it now you can see that everything is gone.

107
00:08:38,140 --> 00:08:39,270
Now I have remove it.

108
00:08:39,280 --> 00:08:42,070
The first step is I added my style.

109
00:08:42,070 --> 00:08:44,740
And lastly I have remove it.

110
00:08:44,770 --> 00:08:46,510
That is one cool thing.

111
00:08:46,900 --> 00:08:54,160
Well, if you also want to get the computer style of the elements, how are we going to do so?

112
00:08:54,250 --> 00:09:05,470
Step number three is get the computed style of the element.

113
00:09:05,500 --> 00:09:07,060
Let me show you what I mean here.

114
00:09:07,630 --> 00:09:15,580
So to get the computed style, we have a method called get computed style, which is this.

115
00:09:15,820 --> 00:09:20,530
Then our pass in my element, which is my title element.

116
00:09:20,830 --> 00:09:24,010
And on that I want the color.

117
00:09:24,230 --> 00:09:31,630
So if I save it now, I can assign to a variable course called computed.

118
00:09:33,830 --> 00:09:37,310
Style is equal to that.

119
00:09:37,310 --> 00:09:43,700
So come here and then just console.log the computer style if I save it.

120
00:09:43,700 --> 00:09:46,040
Now, let me check the console.

121
00:09:46,070 --> 00:09:47,090
Now you see that?

122
00:09:47,090 --> 00:09:55,370
Now I have the actual color that represents this particular each one, meaning getting the value of

123
00:09:55,370 --> 00:09:56,060
the color.

124
00:09:56,480 --> 00:09:58,430
So this method is important.

125
00:09:58,460 --> 00:10:03,580
If you want to know the color code of your color or the type of color being used.

126
00:10:03,590 --> 00:10:09,350
So if I change this one to green, let's see the computed color code here.

127
00:10:09,380 --> 00:10:16,820
If I save it, you see that we have green color, our ggb color down here, which represents this one.

128
00:10:17,180 --> 00:10:20,270
That's how we can get what the computed value.

129
00:10:20,300 --> 00:10:23,900
So now you know how we can access to an element.

130
00:10:23,900 --> 00:10:29,720
Well, so with this one being in mind, we can add any element properties apart from color.

131
00:10:29,750 --> 00:10:33,680
We can also add, let's say add background.

132
00:10:34,250 --> 00:10:38,960
Background color as simple as what?

133
00:10:38,960 --> 00:10:42,350
Select the title element dot style.

134
00:10:42,380 --> 00:10:44,540
Remember style comes first on that.

135
00:10:44,540 --> 00:10:49,850
We have all the CSS properties but the common casing.

136
00:10:50,560 --> 00:11:00,970
Background color like that and then is equal to let's make this one as red when I save it now.

137
00:11:00,970 --> 00:11:03,490
Well, nothing seems to be happening.

138
00:11:03,700 --> 00:11:07,430
So why is it so background.

139
00:11:07,450 --> 00:11:08,710
I think it's G.

140
00:11:09,310 --> 00:11:10,030
Yes.

141
00:11:10,360 --> 00:11:10,840
Yeah.

142
00:11:10,840 --> 00:11:12,780
Sorry, guys, it's G.

143
00:11:12,790 --> 00:11:17,470
So now I can change the color on the background to whites.

144
00:11:17,890 --> 00:11:21,330
For the meantime, let's remove this one because we are okay.

145
00:11:21,460 --> 00:11:25,120
Let's comment this one and change this one to white.

146
00:11:25,840 --> 00:11:27,310
I'll start now.

147
00:11:27,310 --> 00:11:28,120
It's white.

148
00:11:28,150 --> 00:11:31,810
I can also add padding around my h one.

149
00:11:31,810 --> 00:11:33,550
So here we go.

150
00:11:33,970 --> 00:11:36,850
Add padding.

151
00:11:37,030 --> 00:11:39,190
So I would take this code.

152
00:11:39,580 --> 00:11:40,930
Come down here.

153
00:11:41,110 --> 00:11:46,900
It's going to be padding, padding of 20 pixels.

154
00:11:47,050 --> 00:11:50,140
I think this is cool and indeed we have padding.

155
00:11:50,290 --> 00:11:53,080
I can also add font size.

156
00:11:53,470 --> 00:11:59,530
You can see how we are using JavaScript with the help of the DOM to add some content to the page.

157
00:11:59,530 --> 00:12:00,760
So here let's see.

158
00:12:00,760 --> 00:12:07,560
I want to change the font size is change this one to let's say 80 pixels.

159
00:12:07,600 --> 00:12:10,420
Let's see now I have it as that.

160
00:12:10,930 --> 00:12:17,620
So we can use any excess properties to manipulate this particular element using JavaScript.

161
00:12:18,190 --> 00:12:20,800
So now I have introduced this one to you.

162
00:12:20,800 --> 00:12:25,690
We can select any of these elements and add some color to it.

163
00:12:26,230 --> 00:12:32,230
Let me show you how we can use multiple selector to select element and then we're going to add some

164
00:12:32,230 --> 00:12:33,130
style to it.

165
00:12:33,520 --> 00:12:40,840
You can see that these elements, they are identical, meaning they are all l tag so we can select all

166
00:12:40,840 --> 00:12:45,610
the airtag ah to go and then we can add some CSS properties to it.

167
00:12:45,640 --> 00:12:52,450
So let's say that these are our to dos and we want to know which of these to dos that we are done with

168
00:12:52,450 --> 00:12:53,290
it for the meantime.

169
00:12:53,290 --> 00:12:59,860
But for this one, let's say it's a programming language, so you can say that, well, we want to cancel

170
00:12:59,860 --> 00:13:02,290
all the languages that I don't like.

171
00:13:02,290 --> 00:13:02,680
Right?

172
00:13:02,680 --> 00:13:08,080
So the first thing is I'm going to use query select all to select this one.

173
00:13:08,080 --> 00:13:08,730
Okay?

174
00:13:08,740 --> 00:13:13,450
The other so I can use by tag name or any method.

175
00:13:13,450 --> 00:13:16,750
So let's see how we can select this element.

176
00:13:16,870 --> 00:13:19,300
So let me save it this one.

177
00:13:20,380 --> 00:13:21,490
Let me save it here.

178
00:13:21,490 --> 00:13:26,470
So I think we can select this one by tag name, right?

179
00:13:26,470 --> 00:13:30,160
Because we can select that.

180
00:13:30,160 --> 00:13:31,510
So here we go.

181
00:13:31,510 --> 00:13:37,090
So come down here is let's select the allies.

182
00:13:37,150 --> 00:13:37,720
That is it.

183
00:13:37,720 --> 00:13:45,520
So we're going to be const allies element is equal to document dot.

184
00:13:46,930 --> 00:13:50,380
Get element by tag name.

185
00:13:50,740 --> 00:13:53,410
You think by tag name.

186
00:13:53,440 --> 00:13:54,010
Yes.

187
00:13:54,010 --> 00:13:56,020
And I want the I.

188
00:13:56,110 --> 00:13:56,710
Good.

189
00:13:56,710 --> 00:13:59,220
So if I console.log.

190
00:13:59,230 --> 00:14:01,000
The Allies.

191
00:14:01,060 --> 00:14:02,470
The allies.

192
00:14:03,880 --> 00:14:06,610
So let's see what I have here in my console.

193
00:14:07,000 --> 00:14:14,650
You could see that we have a HTML collection and all my elements are in an array.

194
00:14:15,430 --> 00:14:19,450
But behind the scene this is not rare.

195
00:14:19,480 --> 00:14:27,730
Array and functions we saw how I demand also behave like an array.

196
00:14:27,850 --> 00:14:29,320
But they are not.

197
00:14:29,560 --> 00:14:37,450
Even though we can use some method like length on this to know how many elements are in this particular

198
00:14:37,450 --> 00:14:38,140
array.

199
00:14:38,350 --> 00:14:43,120
But not all array methods can be used on this particular array.

200
00:14:43,420 --> 00:14:51,310
So all eight main collections if we want to work with an array, unless we convert from a HTML collection

201
00:14:51,310 --> 00:14:58,740
to normal or proper array and we can do that using two methods and that one too.

202
00:14:58,750 --> 00:15:03,370
We have talked about it before in the pivot section and that is six.

203
00:15:03,550 --> 00:15:10,970
Well, so coming back here, if you try to check Dot's length on this particular array.

204
00:15:10,990 --> 00:15:13,180
Indeed, we have this record.

205
00:15:13,180 --> 00:15:19,420
Let me remove this console.log here, which is the computed value here.

206
00:15:19,570 --> 00:15:20,110
Good.

207
00:15:20,590 --> 00:15:20,980
All right.

208
00:15:20,980 --> 00:15:21,890
So let's continue.

209
00:15:21,910 --> 00:15:22,840
So check it out.

210
00:15:22,840 --> 00:15:26,100
You see that we have six elements inside the array.

211
00:15:26,110 --> 00:15:34,570
Well, but if I try to use, let's say, for each on this array that we assume that is an array.

212
00:15:34,960 --> 00:15:44,440
But if we try to use some array methods like for each on this particular array, you could see that

213
00:15:44,440 --> 00:15:46,510
something where is going to happen.

214
00:15:46,510 --> 00:15:47,590
So check it out.

215
00:15:47,980 --> 00:15:49,570
So let's save it now.

216
00:15:49,570 --> 00:15:52,390
Let's see if we see that list.

217
00:15:52,390 --> 00:16:02,410
Dot for is is not a function, which means that the elements that we have selected is not of type array.

218
00:16:02,620 --> 00:16:05,920
So we cannot use for H on that.

219
00:16:05,950 --> 00:16:13,330
So to do that unless we convert the HTML collection to proper array.

220
00:16:13,750 --> 00:16:17,950
So before looping, let's say here that convict.

221
00:16:19,630 --> 00:16:24,010
The HMO collection.

222
00:16:25,430 --> 00:16:28,550
To proprietary.

223
00:16:33,410 --> 00:16:35,120
All right, proper area.

224
00:16:35,870 --> 00:16:36,440
Good.

225
00:16:36,440 --> 00:16:38,860
And we can do this in two ways.

226
00:16:38,870 --> 00:16:46,910
Remember how we introduce what is called spread operator so we can do that one as const.

227
00:16:47,180 --> 00:16:49,580
Then I would say that convicted.

228
00:16:52,230 --> 00:16:55,540
Element equal to my array.

229
00:16:55,560 --> 00:17:02,750
Then I was spread all my A.T.M. collection, which is my list element.

230
00:17:02,760 --> 00:17:12,180
So with this one, if I console.log the convicted elements here and let's see what we are going to get.

231
00:17:12,180 --> 00:17:15,470
So let me console.log this one down here.

232
00:17:15,480 --> 00:17:20,220
Well, let me comment the for each because for this one is no more.

233
00:17:20,550 --> 00:17:23,310
Let me cut it here and then bring it down here.

234
00:17:23,310 --> 00:17:26,430
And then for the meantime, let's comment this one out.

235
00:17:26,430 --> 00:17:29,850
Now let's work on the convicted elements.

236
00:17:29,850 --> 00:17:34,050
If I save it nine, please see that now this is proper array.

237
00:17:34,110 --> 00:17:39,210
So for this one I can use any for each or any arithmetic on that.

238
00:17:39,210 --> 00:17:40,680
This is the first step.

239
00:17:40,830 --> 00:17:51,450
We can also convict ATM collection to proper array using array from so the same sentence cons convicted.

240
00:17:52,860 --> 00:17:55,180
Element two is equal to.

241
00:17:55,200 --> 00:17:58,920
Then I would take my every dot from.

242
00:17:58,950 --> 00:18:04,830
Then I'll pass in the ATM collection, which is my last element.

243
00:18:04,830 --> 00:18:11,880
So if I console.log this one instead of the first one here, I'm going to get the same result.

244
00:18:12,300 --> 00:18:15,750
So for these methods, the one you think we are okay with it?

245
00:18:15,750 --> 00:18:17,130
You can go buy it.

246
00:18:17,160 --> 00:18:18,320
Okay, good.

247
00:18:18,330 --> 00:18:22,320
So now that we know that we cannot convert, now let's come up here.

248
00:18:22,710 --> 00:18:24,390
Let's uncomment this one.

249
00:18:24,390 --> 00:18:27,350
Now, let's use this one or this one.

250
00:18:27,360 --> 00:18:29,610
Any of these methods would be okay.

251
00:18:29,610 --> 00:18:34,170
So now if I bring this one, now I can use mine for each on that.

252
00:18:34,170 --> 00:18:37,300
So when I save it you can see that there is no error.

253
00:18:37,320 --> 00:18:42,000
Now our JavaScript or application or the browser is happy with us.

254
00:18:42,150 --> 00:18:47,400
So now inside the for each, I have access to the individual element here.

255
00:18:47,430 --> 00:18:51,090
So if I can answer that, log the I.

256
00:18:51,330 --> 00:18:52,770
All right, let's save it.

257
00:18:52,770 --> 00:18:57,960
And I can see that we have the individual else's answer.

258
00:18:57,960 --> 00:19:02,010
So if I open it, you will see that I have some content in it.

259
00:19:02,010 --> 00:19:08,510
The first one is the C language and C++ and the Java.

260
00:19:08,520 --> 00:19:16,950
So with this one being selected now remember we have the style property on that so we can add a color

261
00:19:16,950 --> 00:19:18,630
to all those elements.

262
00:19:18,630 --> 00:19:26,700
So let's see here, add style to or the like.

263
00:19:26,730 --> 00:19:27,820
So here we go.

264
00:19:27,960 --> 00:19:36,120
I would take a dot style and then dot color is equal to red.

265
00:19:36,150 --> 00:19:36,870
Save it.

266
00:19:36,870 --> 00:19:42,600
Now let's check what we have and indeed I have add style to all of this.

267
00:19:42,960 --> 00:19:50,760
But the good thing about this format is that we can meet some conditions assuming that this is an object

268
00:19:50,760 --> 00:19:55,440
with some properties like is done to true or is completed to true.

269
00:19:55,470 --> 00:19:59,010
Then you check any element which is completed.

270
00:19:59,010 --> 00:20:04,920
Assuming they say to dos, then we will check if element who has a completed properties.

271
00:20:04,920 --> 00:20:06,810
Then we are going to underline it.

272
00:20:07,290 --> 00:20:14,430
So I we can say that for this programming languages, I want to cancel all programming languages, which

273
00:20:14,430 --> 00:20:17,520
is not JavaScript because JavaScript is my favorite.

274
00:20:17,520 --> 00:20:17,820
Right?

275
00:20:17,820 --> 00:20:24,810
So I'm going to cancel all of this programming languages with the exception of JavaScript so we can

276
00:20:24,810 --> 00:20:28,410
make some conditions inside the statement.

277
00:20:29,130 --> 00:20:36,570
So our break mind if statement, then I would take a line where I want to get the contents inside this

278
00:20:36,570 --> 00:20:37,800
particular element.

279
00:20:37,920 --> 00:20:44,670
We can get that using the inner HTML or test content and we have a specific video to talk about it.

280
00:20:44,670 --> 00:20:51,270
For the meantime, bear with me and let's use the inner HTML, meaning the contents inside this particular

281
00:20:51,270 --> 00:20:51,780
light.

282
00:20:51,810 --> 00:20:55,290
It can be C, it can be JavaScript, it can be C++.

283
00:20:55,470 --> 00:20:57,120
So if that one.

284
00:20:58,660 --> 00:21:02,030
Is equal to JavaScript.

285
00:21:02,050 --> 00:21:03,480
Let's see the syntax.

286
00:21:03,490 --> 00:21:04,070
Yes.

287
00:21:04,090 --> 00:21:08,050
Uppercase JavaScript going to be JavaScript.

288
00:21:08,500 --> 00:21:13,050
Meaning if this one is true, then I will say the l.

289
00:21:13,060 --> 00:21:13,810
I.

290
00:21:13,840 --> 00:21:15,430
Dot style.

291
00:21:15,520 --> 00:21:16,960
Dot text.

292
00:21:16,960 --> 00:21:18,190
Decoration.

293
00:21:19,260 --> 00:21:24,810
Text's decoration is equal to line.

294
00:21:25,610 --> 00:21:27,710
That's through.

295
00:21:28,010 --> 00:21:32,830
So for this, it's going to cancel this particular JavaScript.

296
00:21:32,840 --> 00:21:33,840
But let's see.

297
00:21:33,860 --> 00:21:35,990
Nothing seems to be appeared.

298
00:21:36,020 --> 00:21:38,450
I think we made some spelling mistake here.

299
00:21:38,480 --> 00:21:43,070
This is uppercase s, but here we made it lowercase.

300
00:21:43,070 --> 00:21:50,330
So let's change this one to uppercase and can see that indeed I have canceled JavaScript, but I want

301
00:21:50,330 --> 00:21:53,330
to cancel all with the exception of JavaScript.

302
00:21:53,330 --> 00:22:00,070
So it's going to be if in HTML is not equal to JavaScript.

303
00:22:00,080 --> 00:22:01,960
Now I want to cancel all of them.

304
00:22:01,970 --> 00:22:03,080
You can see that now.

305
00:22:03,110 --> 00:22:09,060
I have canceled all the programming languages with the exception of JavaScript.

306
00:22:09,080 --> 00:22:14,360
That's one beauty about query selector or or multiple selector.

307
00:22:14,360 --> 00:22:17,420
For that one, we can add a style to go.

308
00:22:17,450 --> 00:22:23,090
All right, now that we know how we can select element and add some basic style in the next video,

309
00:22:23,090 --> 00:22:26,780
let's continue with working with class list.