0
1
00:00:00,160 --> 00:00:01,370
Welcome back guys.
1

2
00:00:01,440 --> 00:00:07,800
So, as you saw in the previous lesson, we were able to use Javascript to select HTML elements and change
2

3
00:00:07,860 --> 00:00:09,450
its color property.
3

4
00:00:09,450 --> 00:00:15,180
Now I showed you one way of doing this using a method called querySelector, but there's actually a
4

5
00:00:15,180 --> 00:00:17,390
lot more ways that you can do this.
5

6
00:00:17,430 --> 00:00:23,940
Now I've added a few classes and ids to our current web page, so we can try out all of the different
6

7
00:00:23,940 --> 00:00:27,420
ways of selecting elements inside the DOM.
7

8
00:00:27,420 --> 00:00:37,140
Now the first one I want to show you is the getElementsByTagName, and what this does is that it looks
8

9
00:00:37,260 --> 00:00:43,710
through the web page and it searches for the element with a particular tag name.
9

10
00:00:43,710 --> 00:00:52,110
So, for example, if we wanted to get a list item as we have here, we have three list items inside a unordered
10

11
00:00:52,110 --> 00:00:53,130
list.
11

12
00:00:53,130 --> 00:00:59,550
If we run this line of code, getElementsByTagName, then you'll see that we actually get back an
12

13
00:00:59,550 --> 00:01:03,490
array that contains all three of our list items.
13

14
00:01:03,540 --> 00:01:08,550
And if you expand this you can see that each list item has a whole bunch of properties that you can
14

15
00:01:08,550 --> 00:01:10,820
tap into and you can manipulate.
15

16
00:01:11,070 --> 00:01:16,390
Now, the important thing about this method, and where it differs from the previous one that we used,
16

17
00:01:16,420 --> 00:01:22,710
which is querySelector, is, if you notice, the word elements is plural here,
17

18
00:01:22,800 --> 00:01:29,890
and what this means is that it's going to fetch all of the elements that have this particular tag name.
18

19
00:01:29,940 --> 00:01:32,220
So it's not just going to fetch one.
19

20
00:01:32,280 --> 00:01:36,960
Now this is important because when you try to manipulate one of these elements,
20

21
00:01:37,040 --> 00:01:42,970
so if we try to tap into the third list item, then we can simply say getElementsByTagName,
21

22
00:01:43,050 --> 00:01:51,390
and whereas before we just said .style.color equals, say, I don't know, purple, then this is not going to
22

23
00:01:51,390 --> 00:01:57,480
work, because, even though the error that you get is a little bit misleading, it says Cannot set property
23

24
00:01:57,510 --> 00:01:59,200
of undefined,
24

25
00:01:59,280 --> 00:02:05,700
and the problem is that we're trying to set the color purple to an array, which doesn't work because,
25

26
00:02:05,700 --> 00:02:10,770
remember, this part of the code gives us back this array with all three list items,
26

27
00:02:11,010 --> 00:02:15,040
and if we try to set its style property, that doesn't make any sense.
27

28
00:02:15,060 --> 00:02:22,110
So what we have to do instead is we have to select the item in the array that we want to change and
28

29
00:02:22,110 --> 00:02:26,540
remember when we select items in arrays we always use the square brackets.
29

30
00:02:26,580 --> 00:02:32,640
So if we wanted the third item, then we would put in the index number 2, and then now if we set 
30

31
00:02:32,640 --> 00:02:36,080
style.color = "purple", then you can see that it's changed
31

32
00:02:36,100 --> 00:02:40,470
our third list item to a purple text.
32

33
00:02:40,500 --> 00:02:46,260
Now if you're at all confused about arrays then be sure to go back to the last module where we spoke
33

34
00:02:46,260 --> 00:02:52,850
about arrays in detail and you can get to grips with this idea before you head back and we continue.
34

35
00:02:52,930 --> 00:02:59,940
Now in addition to being able to tap into a particular element inside this array of items that all have
35

36
00:02:59,940 --> 00:03:04,890
the tag name Ii, we could also use some of the other things that we saw that you can do with arrays, namely,
36

37
00:03:04,890 --> 00:03:09,860
for example, if we wanted to know how many elements there were that have the tag name li,
37

38
00:03:10,200 --> 00:03:16,290
then we can simply generate the array of all of the items and then call .length to get the length property
38

39
00:03:16,620 --> 00:03:21,650
and that will tell us that there are 3 li items in total on this entire page.
39

40
00:03:21,750 --> 00:03:23,130
So that's pretty neat.
40

41
00:03:23,130 --> 00:03:28,790
Now, along this line of getElementBy, you can see that there's a whole bunch of other ones,
41

42
00:03:28,860 --> 00:03:33,150
and another useful one is getElementsByClassName.
42

43
00:03:33,180 --> 00:03:40,650
So what this does is it allows you to select elements based on the name of the class. So you can see
43

44
00:03:40,650 --> 00:03:42,120
here in our web page,
44

45
00:03:42,120 --> 00:03:44,370
I've given a class to some of these elements.
45

46
00:03:44,430 --> 00:03:48,530
So for example the button element has a class of btn.
46

47
00:03:48,690 --> 00:03:55,770
So we can select that button by saying document.getElementsByClassName, and then inside here
47

48
00:03:55,770 --> 00:03:59,060
we'll add the class btn.
48

49
00:03:59,190 --> 00:04:04,650
Now notice this method also has a plural, Elements.
49

50
00:04:04,650 --> 00:04:08,660
So that means that we're also going to get back an array.
50

51
00:04:08,820 --> 00:04:16,140
So it doesn't matter whether if you only have one item that has the class btn. It's still going
51

52
00:04:16,140 --> 00:04:18,020
to give you back an array.
52

53
00:04:18,090 --> 00:04:24,630
So that means that doing this also does not work.
53

54
00:04:24,630 --> 00:04:30,780
And so even if there's only one item that has that particular class that you're selecting, you still
54

55
00:04:30,780 --> 00:04:36,660
have to select the first item using the square brackets and using the index 0.
55

56
00:04:36,660 --> 00:04:45,000
Now the final one in this style of getElementsBy is the getElementById. And the keen eyed amongst
56

57
00:04:45,000 --> 00:04:49,980
you might have noticed that in this case the word Element is no longer plural,
57

58
00:04:50,130 --> 00:04:56,550
and so in fact using this method you only get back one item instead of an array,
58

59
00:04:56,730 --> 00:05:02,080
and the reason being, of course, that, on a single web page, every single id should be unique,
59

60
00:05:02,090 --> 00:05:05,430
so you should not have the same id on more than one element.
60

61
00:05:05,450 --> 00:05:13,190
So, for example, in our case we've got the id list for our unordered list, and we've got the id title for
61

62
00:05:13,240 --> 00:05:14,480
our h1.
62

63
00:05:14,510 --> 00:05:22,650
So if I select on that title id, then I will only get back a single item as opposed to an array of items.
63

64
00:05:22,730 --> 00:05:25,460
And in this case we're getting back our h1.
64

65
00:05:25,460 --> 00:05:31,790
So if I want to change the text inside that title, I can say simply select the element that has the id
65

66
00:05:31,790 --> 00:05:37,170
title, and then change its innerHTML to say, I don't know, Good Bye.
66

67
00:05:37,220 --> 00:05:42,500
Now that text has gone from Hello to Good Bye by selecting it and then manipulating it.
67

68
00:05:42,560 --> 00:05:48,080
Now, another method that can be used to select a single element is the querySelector method that we
68

69
00:05:48,080 --> 00:05:50,260
already saw in the last lesson.
69

70
00:05:50,270 --> 00:05:58,100
Now this method, similar to getElementById, also only returns a single item, but it works a little bit
70

71
00:05:58,100 --> 00:06:04,820
differently, because the string that you're going to put inside the parentheses is a selector.
71

72
00:06:04,820 --> 00:06:06,120
Now what are selectors?
72

73
00:06:06,170 --> 00:06:08,610
Well, we've been using it in our CSS
73

74
00:06:08,840 --> 00:06:10,110
all of this time.
74

75
00:06:10,220 --> 00:06:14,090
Here's the styles.css us for our TinDog web site.
75

76
00:06:14,270 --> 00:06:21,560
And you can see that the selector that we use in CSS is just the part that we specify before the curly
76

77
00:06:21,560 --> 00:06:22,280
braces.
77

78
00:06:22,430 --> 00:06:27,950
So to select elements we simply just write the name of the element, to select classes
78

79
00:06:27,980 --> 00:06:34,880
we add a dot in front of the name of the class, and to select ids we add the pound sign in front.
79

80
00:06:35,180 --> 00:06:39,510
And of course with selectors we can combine different things,
80

81
00:06:39,530 --> 00:06:46,910
for example an id with a class, or a class with an element, and it's a much more specific way of selecting
81

82
00:06:46,910 --> 00:06:51,090
a particular thing inside your web site in order to change.
82

83
00:06:51,320 --> 00:06:57,900
So let's head back over here and let's use our querySelector to select something.
83

84
00:06:57,920 --> 00:07:01,660
So whereas before, when I used getElementById,
84

85
00:07:01,760 --> 00:07:07,790
I could only specify a valid id, and when it does getElementsByClass then I could only put in a class,
85

86
00:07:08,150 --> 00:07:08,860
inside here
86

87
00:07:08,870 --> 00:07:11,830
I could put in an element, a class, or an id,
87

88
00:07:11,840 --> 00:07:13,000
it doesn't really matter.
88

89
00:07:13,130 --> 00:07:21,260
So for example, if I want to select our h1, then I can simply say h1 in here, or if I wanted to
89

90
00:07:21,260 --> 00:07:29,570
select it by its id, then I could say querySelector, and in here I would add that pound sign to show
90

91
00:07:29,570 --> 00:07:35,870
that I'm specifying an id, then I would use the id title, and still we would get back exactly the same
91

92
00:07:35,870 --> 00:07:36,380
thing.
92

93
00:07:36,650 --> 00:07:43,340
And it works exactly the same way with class as well. All we have to do is just add a dot in front, just
93

94
00:07:43,340 --> 00:07:44,950
as we did inside the CSS.
94

95
00:07:44,960 --> 00:07:51,000
So if I wanted our button then I can just say .btn and I would get back our button.
95

96
00:07:51,140 --> 00:07:58,430
But more importantly, I can combine our selectors and query for something that's quite specific.
96

97
00:07:58,460 --> 00:08:03,040
So for example we've got a link here inside our first list item.
97

98
00:08:03,050 --> 00:08:07,340
Now let's say that we have another link that's just free floating around,
98

99
00:08:07,550 --> 00:08:12,630
and I only wanted to select the link that was inside the list item.
99

100
00:08:12,800 --> 00:08:19,220
Well, I can do that by combining my selector and saying select the anchor tag inside the list element.
100

101
00:08:19,560 --> 00:08:24,740
And remember when we're doing hierarchical selectors, there's a space between the two selectors.
101

102
00:08:24,740 --> 00:08:32,120
So now, if I hit enter, then you can see that I'm getting back the href that's inside our li, as opposed to
102

103
00:08:32,180 --> 00:08:33,140
this one,
103

104
00:08:33,140 --> 00:08:37,460
whereas if I just said querySelector("a"), then I would get back
104

105
00:08:37,460 --> 00:08:42,860
this first one. As you can see the highlighting is showing you which one we're getting back from these
105

106
00:08:42,860 --> 00:08:44,410
results.
106

107
00:08:44,540 --> 00:08:51,680
Now I can also combine my selectors by saying something like I want the element that has a class of
107

108
00:08:51,740 --> 00:08:54,760
item that is also an li element.
108

109
00:08:54,800 --> 00:09:00,780
So to do that I would say li. to specify the class which is called item.
109

110
00:09:00,950 --> 00:09:03,410
And remember when you're combining selectors,
110

111
00:09:03,410 --> 00:09:06,160
so things that occur in the same element,
111

112
00:09:06,200 --> 00:09:08,210
then there are no spaces.
112

113
00:09:08,210 --> 00:09:14,750
So whereas before it was the anchor element inside the list element,
113

114
00:09:14,780 --> 00:09:20,580
so hierarchical, the child of this parent, in this case it's all in the same element.
114

115
00:09:20,660 --> 00:09:26,240
It's the list item that also has a class of item.
115

116
00:09:26,270 --> 00:09:33,920
So now if I hit enter you can see I get back my first list item, and you can also use the id as well.
116

117
00:09:33,920 --> 00:09:39,550
So, for example, in this case, what do you think I will select based on this selector?
117

118
00:09:39,560 --> 00:09:41,800
Five seconds, see if you can get the answer.
118

119
00:09:46,170 --> 00:09:46,530
All right.
119

120
00:09:46,530 --> 00:09:52,420
So this is a hierarchical selector, as you can tell by the space in between the two selectors.
120

121
00:09:52,680 --> 00:09:59,810
So in this case we're looking for an anchor tag that is inside something that has an id of list.
121

122
00:09:59,850 --> 00:10:07,580
So, in that case, that is going to be this one, which is a child, or rather grandchild, of this unordered 
122

123
00:10:07,590 --> 00:10:09,390
list with an id of list.
123

124
00:10:09,840 --> 00:10:13,150
And if I hit enter we can confirm the answer.
124

125
00:10:14,590 --> 00:10:20,890
Now here's a question. What if your selector matches more than one object?
125

126
00:10:20,890 --> 00:10:30,280
Because if I say, for example, id list with a class of item, then you could see that all three of these
126

127
00:10:30,280 --> 00:10:33,000
list items satisfy that query.
127

128
00:10:33,010 --> 00:10:40,780
They all have a class of item and they're all nested under a ul with an id of list.
128

129
00:10:40,780 --> 00:10:42,970
So which one do you get back?
129

130
00:10:43,150 --> 00:10:50,960
Well actually, you only get back the first item in the document that satisfies that selector.
130

131
00:10:50,990 --> 00:10:57,610
Now, what if you wanted all of the objects that match that selector? Well, then you would have to use a
131

132
00:10:57,610 --> 00:11:04,080
slightly different method. Instead of querySelector, which sounds very singular,
132

133
00:11:04,360 --> 00:11:07,300
you would have to use a method called querySelectorAll.
133

134
00:11:07,420 --> 00:11:15,820
And now, by using the exact same line of code other than that word All, we get back a list of all
134

135
00:11:15,820 --> 00:11:19,790
three list items that satisfy that particular selector.
135

136
00:11:19,930 --> 00:11:21,240
And similar to before,
136

137
00:11:21,250 --> 00:11:28,360
if you wanted to change and manipulate items in here, you would have to specify their index, because it
137

138
00:11:28,360 --> 00:11:30,100
is an array.
138

139
00:11:30,100 --> 00:11:37,060
Now, given that we've seen all of these different types of ways of selecting our HTML elements, which
139

140
00:11:37,060 --> 00:11:38,850
one should you actually use?
140

141
00:11:38,950 --> 00:11:45,820
Well, querySelector, and it's slightly greedier brother querySelectorAll, allow for more complex
141

142
00:11:45,820 --> 00:11:54,100
queries, because we're able to specify id, class, element, tag names, and combine them in order to target
142

143
00:11:54,100 --> 00:11:56,270
the exact element that we want,
143

144
00:11:56,440 --> 00:12:02,740
whereas the getElement methods are more broad and it's more difficult to target individual objects without
144

145
00:12:02,740 --> 00:12:04,640
going in to change the HTML.
145

146
00:12:04,660 --> 00:12:10,240
So, generally, in the code that you'll come across in the wild, you'll see querySelector a lot more than
146

147
00:12:10,240 --> 00:12:17,440
getElement, as, in most cases, you can use querySelector and querySelectorAll to do all the things that
147

148
00:12:17,440 --> 00:12:17,990
you can do
148

149
00:12:18,000 --> 00:12:19,950
with the getElement methods.
149

150
00:12:20,290 --> 00:12:26,260
So I recommend that you try out all of them and you'll get a feel for which one will be the most adaptable
150

151
00:12:26,590 --> 00:12:31,150
and which one you'll find to be the most useful in your case.
151

152
00:12:31,150 --> 00:12:38,620
Now as a challenge I want you to use what you learned in this lesson to change the text color of the
152

153
00:12:38,620 --> 00:12:40,450
Google link over here.
153

154
00:12:40,450 --> 00:12:43,150
So not this one but this one.
154

155
00:12:43,150 --> 00:12:51,680
Now remember that, if you look at the DOM tree, that link is an anchor tag nested inside a list element,
155

156
00:12:51,790 --> 00:12:58,770
so try and see if you can change its color to red. Pause the video and complete the challenge now.
156

157
00:12:58,810 --> 00:12:59,170
All right.
157

158
00:12:59,170 --> 00:13:00,720
So how did that go?
158

159
00:13:00,970 --> 00:13:08,580
Well, remember that the anchor tag that we want to change is nested inside an li inside a ul.
159

160
00:13:08,590 --> 00:13:14,590
So in order to change the color of our Google link we have to select the anchor tag and not just the
160

161
00:13:14,590 --> 00:13:16,210
list item.
161

162
00:13:16,210 --> 00:13:25,240
So to do that you have to tap into the document and then we have to querySelector for a anchor tag that is
162

163
00:13:25,330 --> 00:13:27,860
inside a list element.
163

164
00:13:28,350 --> 00:13:30,380
And now we can use this.
164

165
00:13:30,410 --> 00:13:33,160
And now let's just confirm that we've got the right one.
165

166
00:13:33,260 --> 00:13:38,980
There we go. And the anchor tag that we want is being highlighted, so we can now go and simply set its 
166

167
00:13:39,340 --> 00:13:42,700
style.color to red.
167

168
00:13:42,700 --> 00:13:43,350
There we go.
168

169
00:13:43,510 --> 00:13:46,000
And now that link is red.
169

170
00:13:46,060 --> 00:13:53,140
Now if you tried to do this just by selecting the first list item then this will only change the color
170

171
00:13:53,140 --> 00:13:58,030
of the bullet point without changing the color of the text,
171

172
00:13:58,420 --> 00:14:03,920
and that is because this anchor tag is actually a separate element from the list item.
172

173
00:14:04,000 --> 00:14:08,820
So maybe that was a little bit mean on my part but I hope it was fun trying it out nonetheless.
173

174
00:14:08,830 --> 00:14:15,140
So in the next lesson we're going to learn more about how we can manipulate the CSS styles using Javascript.
174

175
00:14:15,170 --> 00:14:16,940
So I'll see you on the next lesson.