1
00:00:05,140 --> 00:00:12,490
Let's see how we can use these selectors to select elements in our application.

2
00:00:12,610 --> 00:00:13,270
Perfect.

3
00:00:13,270 --> 00:00:20,440
So we are going to take these methods one after the other and see how we can use it.

4
00:00:20,770 --> 00:00:23,590
Selecting element is the first.

5
00:00:23,650 --> 00:00:31,180
Hey, if you want to become experience or a professional JavaScript developer, we need to know how

6
00:00:31,180 --> 00:00:32,650
to select element.

7
00:00:32,650 --> 00:00:37,600
So this video or this section is really important to understand.

8
00:00:37,840 --> 00:00:44,550
So let's start with how we can use get element by ID to select element.

9
00:00:44,560 --> 00:00:47,200
So back to visual seed code.

10
00:00:47,380 --> 00:00:54,040
As usual, I have a first project so I will provide this to the template for you.

11
00:00:54,250 --> 00:00:59,590
Download it, extract it, and then open using your preferred code editor.

12
00:00:59,920 --> 00:01:03,880
So here for the HTML as before the same semantic.

13
00:01:04,030 --> 00:01:05,560
There is nothing new here.

14
00:01:05,560 --> 00:01:09,310
If you open it, you're going to have something like this.

15
00:01:09,310 --> 00:01:15,130
Again, this section is talking about HTML but instead is about the DOM.

16
00:01:15,130 --> 00:01:20,290
So we are going to use those selectors to select pieces of elements.

17
00:01:20,290 --> 00:01:21,550
So why are we selecting?

18
00:01:21,550 --> 00:01:28,300
Because we want to use JavaScript to interact with these HTML to delete or to add content.

19
00:01:28,330 --> 00:01:34,390
Before we get into the adding and all the events, let us know how we can select first.

20
00:01:34,570 --> 00:01:40,240
So back to my JavaScript, let's start with single selectors.

21
00:01:41,890 --> 00:01:43,000
Single

22
00:01:45,370 --> 00:02:00,670
selectors and the first one is called Get Element by ID first one going to be gate element by ID take

23
00:02:00,670 --> 00:02:02,530
note about capitalisation.

24
00:02:02,530 --> 00:02:03,340
That is it.

25
00:02:03,340 --> 00:02:04,480
So let's see.

26
00:02:04,720 --> 00:02:11,770
As the name implies, this one is used to select element by its ID.

27
00:02:11,950 --> 00:02:19,570
So back to our HTML, any element with an ID is going to select that.

28
00:02:19,570 --> 00:02:26,920
So looking at this syntax here, there is no ID attribute attached to any of these elements.

29
00:02:27,160 --> 00:02:32,320
So any element that you want to select, you need to give it an ID.

30
00:02:32,320 --> 00:02:38,410
So here this ID is going to identify this particular element.

31
00:02:38,740 --> 00:02:41,140
So you can see that this is a title.

32
00:02:41,710 --> 00:02:48,040
So here we have an element with ID equal to title.

33
00:02:48,730 --> 00:02:53,020
So with this one I cannot use JavaScript to select this one.

34
00:02:53,020 --> 00:03:04,870
So back to my JavaScript, here we go to const, then title element and then it's equal to document.

35
00:03:05,630 --> 00:03:06,590
Dot.

36
00:03:07,880 --> 00:03:19,070
Get element by ID and then you pass in the name of the ID or the value which is equal to the title.

37
00:03:19,610 --> 00:03:21,200
Is that so?

38
00:03:21,200 --> 00:03:31,490
If I console.log the title element now let's see the console open up and you we see that I have selected

39
00:03:31,490 --> 00:03:36,020
the one because it has an ID of title.

40
00:03:36,050 --> 00:03:38,450
That's why it has been selected that.

41
00:03:38,450 --> 00:03:44,150
So let's say that I'll provide a value on ID that doesn't exist.

42
00:03:44,150 --> 00:03:45,140
Let's see.

43
00:03:45,170 --> 00:03:47,270
It gives me no meaning.

44
00:03:47,270 --> 00:03:48,830
It doesn't exist.

45
00:03:48,830 --> 00:03:59,810
So you use the get element by ID to select element which has a specific ID that is about the get element

46
00:03:59,810 --> 00:04:01,070
by ID.

47
00:04:01,430 --> 00:04:05,840
Let's say that we have multiple elements with the same ID.

48
00:04:05,840 --> 00:04:14,180
So here let's say for this p tag here or come into line number 19 here, we can also add the same ID

49
00:04:14,210 --> 00:04:15,110
of title.

50
00:04:15,140 --> 00:04:22,400
Let's see which one is going to select here we have two elements with the same ID.

51
00:04:23,250 --> 00:04:24,100
Of title.

52
00:04:24,120 --> 00:04:32,460
So with this one, if I say the file again and check the console, well, let me bring it back to title

53
00:04:32,460 --> 00:04:32,880
again.

54
00:04:32,880 --> 00:04:33,570
Sorry.

55
00:04:34,050 --> 00:04:36,000
So here is a title.

56
00:04:36,420 --> 00:04:41,340
And now let's see if we see that it has selected the first one.

57
00:04:41,730 --> 00:04:50,490
So get element by ID, select the first element that matches the value of the ID.

58
00:04:51,180 --> 00:04:59,790
So apart from that element by ID, we also have query selector well, so query selector.

59
00:05:00,030 --> 00:05:06,840
This one is used to select whether is an ID or is a class.

60
00:05:07,080 --> 00:05:18,180
Thus one cool thing about the query selector is select an element by its CSS selector or by it ID.

61
00:05:18,630 --> 00:05:25,740
So with the same method here or selector, we can use it to select this particular element.

62
00:05:25,740 --> 00:05:28,530
So here is going to be method two.

63
00:05:28,560 --> 00:05:31,710
Here is going to be.

64
00:05:32,860 --> 00:05:33,760
Kerry.

65
00:05:34,910 --> 00:05:36,440
Selector.

66
00:05:36,740 --> 00:05:42,800
This one is used to select element either by class or by ID.

67
00:05:43,190 --> 00:05:45,640
So for this one we see that we have.

68
00:05:45,650 --> 00:05:47,570
Now, let me remove this one.

69
00:05:47,840 --> 00:05:50,710
Let's have only one element.

70
00:05:50,840 --> 00:05:52,370
Okay, it is my ID.

71
00:05:52,940 --> 00:05:55,490
Let's make this one as class.

72
00:05:55,490 --> 00:06:02,120
They say as title as that is an ID and this is a class.

73
00:06:02,120 --> 00:06:03,740
So they are different.

74
00:06:03,740 --> 00:06:07,670
So here with query selector the same thing.

75
00:06:07,790 --> 00:06:08,480
Let me.

76
00:06:09,450 --> 00:06:09,930
Comment.

77
00:06:09,930 --> 00:06:11,130
This one out.

78
00:06:11,220 --> 00:06:12,660
And now here you go.

79
00:06:12,690 --> 00:06:20,940
Const title element is equal to document dot query selector.

80
00:06:21,330 --> 00:06:31,800
Then for this, if it's a class, we are going to use dot so code and then period then the name of the

81
00:06:31,800 --> 00:06:34,710
class name or the class which is title.

82
00:06:34,920 --> 00:06:40,770
So the same if I console.log the title element.

83
00:06:40,800 --> 00:06:42,090
Let's see what we have.

84
00:06:42,090 --> 00:06:48,900
Indeed we have what is coding in because it has a title, a class of title.

85
00:06:48,930 --> 00:06:54,780
So we can also use this method to select element if it is an ID.

86
00:06:54,960 --> 00:06:56,820
Okay, so same thing.

87
00:06:56,820 --> 00:06:59,190
Let's target this one with the ID.

88
00:06:59,190 --> 00:07:00,660
So here we go.

89
00:07:00,780 --> 00:07:05,580
So the same syntax here is going to be tied to here.

90
00:07:05,580 --> 00:07:09,240
So here instead of dots, we are going to use hash tag.

91
00:07:09,510 --> 00:07:13,500
So if I save it now let's console.log the two.

92
00:07:14,250 --> 00:07:18,570
If I save it, it will see that I have selected that.

93
00:07:19,290 --> 00:07:27,930
So this query selector is very powerful than the get element by ID because this one can use to select

94
00:07:27,930 --> 00:07:33,540
element by ID and by class name or by class.

95
00:07:33,660 --> 00:07:37,080
So that is this method under single selectors.

96
00:07:37,080 --> 00:07:42,030
And again, this what we are going to use a lot, a lot and a lot.

97
00:07:42,150 --> 00:07:44,460
So back to multiple selectors.

98
00:07:45,270 --> 00:07:52,170
So for multiple selectors, the first method is called get element by tag name.

99
00:07:52,530 --> 00:08:01,680
Example of tag can be P tag dave, a tag, H1 tag and many other tags.

100
00:08:01,680 --> 00:08:07,380
So this one select all elements with specific tag name.

101
00:08:07,620 --> 00:08:15,120
So back to our HTML, we have 1h1 here, 1h1 here.

102
00:08:15,390 --> 00:08:23,190
We have p tag here and we have h two and we have the UL down here so we can use the multiple selector

103
00:08:23,190 --> 00:08:25,080
to select all of these.

104
00:08:25,170 --> 00:08:28,920
So let's start with multiple selectors comment.

105
00:08:28,920 --> 00:08:40,830
This one out going to be multiple selectors and the first one is called get element by tag name.

106
00:08:41,039 --> 00:08:49,010
First one gets elements C we have A's meaning pure, right meaning are going to get many elements.

107
00:08:49,020 --> 00:08:52,320
So get element by.

108
00:08:54,080 --> 00:08:57,050
Tag name.

109
00:08:57,440 --> 00:08:58,220
That is it.

110
00:08:58,250 --> 00:08:59,360
That's what we have here.

111
00:08:59,390 --> 00:09:00,290
Tag name.

112
00:09:00,440 --> 00:09:03,380
So let's start with counts.

113
00:09:03,530 --> 00:09:05,330
Let's see h once.

114
00:09:05,330 --> 00:09:08,150
So it's equal to document.

115
00:09:08,180 --> 00:09:11,600
Dot gets element by.

116
00:09:12,850 --> 00:09:16,360
Get element by tag name.

117
00:09:16,360 --> 00:09:19,680
So here I would select each one tags.

118
00:09:19,690 --> 00:09:29,670
So let's console.log all the h one tag inside this h one it can be or h once.

119
00:09:29,680 --> 00:09:37,330
So let's see that indeed we have all the h lines has been added into an array.

120
00:09:37,720 --> 00:09:45,280
That is one thing about query, select or multiple selectors is select all element and put it in an

121
00:09:45,280 --> 00:09:50,710
array so we can also select all p tags here.

122
00:09:50,740 --> 00:10:01,810
So here are going to be as P and you're going to be P's tag all P's or P's when you are selecting all

123
00:10:01,810 --> 00:10:03,460
P's in the page.

124
00:10:03,460 --> 00:10:07,330
And now we have two PS on the page.

125
00:10:07,330 --> 00:10:08,080
How is that?

126
00:10:08,080 --> 00:10:09,970
So if I open it, indeed.

127
00:10:09,970 --> 00:10:11,410
We have two P's.

128
00:10:11,410 --> 00:10:13,090
We have the method length.

129
00:10:13,090 --> 00:10:19,180
There are two records in this node list and we call as what, eight collection?

130
00:10:20,110 --> 00:10:20,590
All right.

131
00:10:20,590 --> 00:10:29,740
So now apart from get element by tag, you also have one core get element by class name, meaning that

132
00:10:29,740 --> 00:10:36,220
you're going to select all elements where a certain class name or with a certain class name.

133
00:10:36,550 --> 00:10:39,100
So back to our code.

134
00:10:39,130 --> 00:10:42,670
Now we have this H one work title.

135
00:10:43,580 --> 00:10:44,990
Of class of title here.

136
00:10:44,990 --> 00:10:49,280
You can copy that and add to this h to the same class name.

137
00:10:49,280 --> 00:10:56,900
Let's add the same class to this one and see we now we have three elements with the same class names

138
00:10:57,170 --> 00:11:04,730
so we can use get element by class name, which is this gets elements by class name.

139
00:11:04,730 --> 00:11:11,150
It is as soon as we see plural like gets elements meaning we are going to select a lot of elements.

140
00:11:11,270 --> 00:11:13,640
So I can bring this one here.

141
00:11:14,030 --> 00:11:15,200
Come down here.

142
00:11:15,230 --> 00:11:16,490
Copy this one.

143
00:11:17,200 --> 00:11:22,490
Going to be method to get elements by class name.

144
00:11:22,850 --> 00:11:26,960
So here I'm going to be by class name.

145
00:11:27,320 --> 00:11:29,150
So here we go.

146
00:11:30,080 --> 00:11:35,450
So let me bring this one and down here, let me comment this one out.

147
00:11:35,450 --> 00:11:41,360
So going to be ls or EMC element, it can be anything.

148
00:11:41,360 --> 00:11:51,410
So here are going to be get documents dot gets element by class name and the class theme I want is called

149
00:11:51,410 --> 00:11:52,220
title.

150
00:11:52,340 --> 00:11:58,430
So we are going to be title element or title element.

151
00:11:59,330 --> 00:12:02,000
Let me add A's to show that is plural.

152
00:12:02,060 --> 00:12:08,510
You're going to select multiple elements here so I can go ahead and console.log my titles.

153
00:12:08,510 --> 00:12:15,920
And indeed inside we have a HTML collection and we have the individual element inside my note list or

154
00:12:15,920 --> 00:12:18,440
my array as that.

155
00:12:18,440 --> 00:12:22,310
That is about the get elements by class name.

156
00:12:22,670 --> 00:12:26,930
The next one is gets element by name.

157
00:12:27,440 --> 00:12:31,070
This method is normally used with impute field.

158
00:12:31,070 --> 00:12:37,790
So coming back to our HTML, we see that we have a form with these values.

159
00:12:37,790 --> 00:12:39,800
The input of email.

160
00:12:39,800 --> 00:12:47,990
First one is the text of name and it has ID of name and we have the email and we have the.

161
00:12:47,990 --> 00:12:55,040
So for this one, we can also select pieces of this input field unless we add an attribute of name.

162
00:12:55,040 --> 00:13:03,890
So for this one, let's say first name for this particular input field and for the email to, we can

163
00:13:03,890 --> 00:13:13,040
also add a name attribute and give this one as email so we can use JavaScript to select this input by

164
00:13:13,040 --> 00:13:13,670
name.

165
00:13:13,760 --> 00:13:15,230
So come here.

166
00:13:15,230 --> 00:13:23,750
The next method is what get element by name is it gets element by name.

167
00:13:23,750 --> 00:13:25,130
So going to be get.

168
00:13:26,700 --> 00:13:30,450
Element by name.

169
00:13:30,870 --> 00:13:32,340
So here we go.

170
00:13:32,880 --> 00:13:37,760
So as usual, let's assign the value coms.

171
00:13:37,770 --> 00:13:39,240
Let's say first.

172
00:13:40,320 --> 00:13:41,850
Let's say name element.

173
00:13:41,940 --> 00:13:48,570
Name element is equal to document.

174
00:13:49,260 --> 00:13:54,810
Dot gets element by name, the name you want.

175
00:13:54,840 --> 00:13:56,610
Let's select the email.

176
00:13:56,790 --> 00:14:01,710
So because we have a name of email on line number 44.

177
00:14:01,980 --> 00:14:09,300
So here I can quickly go ahead and console.log the name element.

178
00:14:09,660 --> 00:14:10,500
So check it out.

179
00:14:10,500 --> 00:14:18,090
Indeed, we have the input inside my node list as that so we can look through and get the individual

180
00:14:18,090 --> 00:14:19,770
input field in it.

181
00:14:20,220 --> 00:14:24,160
So that is it about the gate element by name.

182
00:14:24,180 --> 00:14:27,960
The next one is query selector.

183
00:14:28,080 --> 00:14:36,840
Oh, and again, this is a method we are going to use a lot in case you want to select or element with

184
00:14:36,840 --> 00:14:41,310
specific class name all these selectors.

185
00:14:41,310 --> 00:14:44,550
This one is what we are going to use a lot.

186
00:14:44,580 --> 00:14:44,970
Great.

187
00:14:44,970 --> 00:14:46,980
So let's see how we are going to use.

188
00:14:47,040 --> 00:14:52,950
Remember, query selector can be used to select whether it's an ID or a class.

189
00:14:52,950 --> 00:14:54,900
So let's see how we can select that.

190
00:14:54,900 --> 00:14:55,380
So let's see.

191
00:14:55,380 --> 00:15:06,840
Now we have, we have the first element by ID of title and this one we can also add the same ID of title

192
00:15:07,080 --> 00:15:15,000
if we are using the query selector or get element by ID is going to select the first one.

193
00:15:15,450 --> 00:15:23,730
But if you use this method is going to select all element with the same ID or with the same class name.

194
00:15:24,060 --> 00:15:30,590
So for this one, let's select all with the ID, so come back to mind JavaScript here.

195
00:15:30,900 --> 00:15:34,200
So this method here, come down here.

196
00:15:34,230 --> 00:15:35,220
We're going to be.

197
00:15:35,950 --> 00:15:41,860
Query selector or query selector.

198
00:15:43,390 --> 00:15:44,440
Or so.

199
00:15:44,440 --> 00:15:45,190
Here you go.

200
00:15:45,400 --> 00:15:49,780
So let me comment this once and comment this one is out.

201
00:15:49,780 --> 00:15:50,740
So here we go.

202
00:15:50,860 --> 00:15:52,240
Going to be const.

203
00:15:53,080 --> 00:15:54,010
Let me have some.

204
00:15:55,120 --> 00:15:57,310
Let me have some enough room here.

205
00:15:57,730 --> 00:15:58,810
So here we go.

206
00:15:58,850 --> 00:16:00,580
Going to be titled

207
00:16:03,310 --> 00:16:06,610
element is equal to document.

208
00:16:06,640 --> 00:16:09,760
Dot query select to all.

209
00:16:09,760 --> 00:16:15,490
And for this, if it is a class, you are going to use dots and then the class name.

210
00:16:15,490 --> 00:16:20,890
But for ID we are going to use hashtag in the name of the ID.

211
00:16:20,890 --> 00:16:26,380
So here if I console.log the title, so let's save it.

212
00:16:26,380 --> 00:16:34,990
And now if you see that I have two of the elements with the same word, with the same ID, so we can

213
00:16:34,990 --> 00:16:41,800
look through this and display the individual element so we can use title elements here.

214
00:16:41,830 --> 00:16:50,320
Remember, for each now I can pass in my callback function individual elements and now I can console.log

215
00:16:50,320 --> 00:16:58,690
the element in the array and I we see that now I have my element being displayed as that.

216
00:16:58,870 --> 00:17:02,200
So we can also change this one to class.

217
00:17:02,200 --> 00:17:04,540
Likewise this one to class.

218
00:17:04,569 --> 00:17:11,530
So if we don't select all the same syntax by here, we're going to be different.

219
00:17:11,530 --> 00:17:17,349
So here it is a class no more hash tag by instead period.

220
00:17:17,800 --> 00:17:25,480
You can see that we have many elements here because all this element has class name of title.

221
00:17:25,630 --> 00:17:33,730
Now that we know how to select element in this video, let's move further and see after selecting what

222
00:17:33,730 --> 00:17:35,230
are we going to do with it?

223
00:17:35,230 --> 00:17:40,570
And that is what we are going to talk about, how we can change element properties.

224
00:17:40,570 --> 00:17:47,620
So for this one, we can now add some color to the HTML or we can remove some content.

225
00:17:47,620 --> 00:17:52,060
And that is what we are going to talk about in the next video.