Welcome back guys. 1
So, as you saw in the previous lesson, we were able to use Javascript to select HTML elements and change 2
its color property. 3
Now I showed you one way of doing this using a method called querySelector, but there's actually a 4
lot more ways that you can do this. 5
Now I've added a few classes and ids to our current web page, so we can try out all of the different 6
ways of selecting elements inside the DOM. 7
Now the first one I want to show you is the getElementsByTagName, and what this does is that it looks 8
through the web page and it searches for the element with a particular tag name. 9
So, for example, if we wanted to get a list item as we have here, we have three list items inside a unordered 10
list. 11
If we run this line of code, getElementsByTagName, then you'll see that we actually get back an 12
array that contains all three of our list items. 13
And if you expand this you can see that each list item has a whole bunch of properties that you can 14
tap into and you can manipulate. 15
Now, the important thing about this method, and where it differs from the previous one that we used, 16
which is querySelector, is, if you notice, the word elements is plural here, 17
and what this means is that it's going to fetch all of the elements that have this particular tag name. 18
So it's not just going to fetch one. 19
Now this is important because when you try to manipulate one of these elements, 20
so if we try to tap into the third list item, then we can simply say getElementsByTagName, 21
and whereas before we just said .style.color equals, say, I don't know, purple, then this is not going to 22
work, because, even though the error that you get is a little bit misleading, it says Cannot set property 23
of undefined, 24
and the problem is that we're trying to set the color purple to an array, which doesn't work because, 25
remember, this part of the code gives us back this array with all three list items, 26
and if we try to set its style property, that doesn't make any sense. 27
So what we have to do instead is we have to select the item in the array that we want to change and 28
remember when we select items in arrays we always use the square brackets. 29
So if we wanted the third item, then we would put in the index number 2, and then now if we set 30
style.color = "purple", then you can see that it's changed 31
our third list item to a purple text. 32
Now if you're at all confused about arrays then be sure to go back to the last module where we spoke 33
about arrays in detail and you can get to grips with this idea before you head back and we continue. 34
Now in addition to being able to tap into a particular element inside this array of items that all have 35
the tag name Ii, we could also use some of the other things that we saw that you can do with arrays, namely, 36
for example, if we wanted to know how many elements there were that have the tag name li, 37
then we can simply generate the array of all of the items and then call .length to get the length property 38
and that will tell us that there are 3 li items in total on this entire page. 39
So that's pretty neat. 40
Now, along this line of getElementBy, you can see that there's a whole bunch of other ones, 41
and another useful one is getElementsByClassName. 42
So what this does is it allows you to select elements based on the name of the class. So you can see 43
here in our web page, 44
I've given a class to some of these elements. 45
So for example the button element has a class of btn. 46
So we can select that button by saying document.getElementsByClassName, and then inside here 47
we'll add the class btn. 48
Now notice this method also has a plural, Elements. 49
So that means that we're also going to get back an array. 50
So it doesn't matter whether if you only have one item that has the class btn. It's still going 51
to give you back an array. 52
So that means that doing this also does not work. 53
And so even if there's only one item that has that particular class that you're selecting, you still 54
have to select the first item using the square brackets and using the index 0. 55
Now the final one in this style of getElementsBy is the getElementById. And the keen eyed amongst 56
you might have noticed that in this case the word Element is no longer plural, 57
and so in fact using this method you only get back one item instead of an array, 58
and the reason being, of course, that, on a single web page, every single id should be unique, 59
so you should not have the same id on more than one element. 60
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
our h1. 62
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
And in this case we're getting back our h1. 64
So if I want to change the text inside that title, I can say simply select the element that has the id 65
title, and then change its innerHTML to say, I don't know, Good Bye. 66
Now that text has gone from Hello to Good Bye by selecting it and then manipulating it. 67
Now, another method that can be used to select a single element is the querySelector method that we 68
already saw in the last lesson. 69
Now this method, similar to getElementById, also only returns a single item, but it works a little bit 70
differently, because the string that you're going to put inside the parentheses is a selector. 71
Now what are selectors? 72
Well, we've been using it in our CSS 73
all of this time. 74
Here's the styles.css us for our TinDog web site. 75
And you can see that the selector that we use in CSS is just the part that we specify before the curly 76
braces. 77
So to select elements we simply just write the name of the element, to select classes 78
we add a dot in front of the name of the class, and to select ids we add the pound sign in front. 79
And of course with selectors we can combine different things, 80
for example an id with a class, or a class with an element, and it's a much more specific way of selecting 81
a particular thing inside your web site in order to change. 82
So let's head back over here and let's use our querySelector to select something. 83
So whereas before, when I used getElementById, 84
I could only specify a valid id, and when it does getElementsByClass then I could only put in a class, 85
inside here 86
I could put in an element, a class, or an id, 87
it doesn't really matter. 88
So for example, if I want to select our h1, then I can simply say h1 in here, or if I wanted to 89
select it by its id, then I could say querySelector, and in here I would add that pound sign to show 90
that I'm specifying an id, then I would use the id title, and still we would get back exactly the same 91
thing. 92
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
as we did inside the CSS. 94
So if I wanted our button then I can just say .btn and I would get back our button. 95
But more importantly, I can combine our selectors and query for something that's quite specific. 96
So for example we've got a link here inside our first list item. 97
Now let's say that we have another link that's just free floating around, 98
and I only wanted to select the link that was inside the list item. 99
Well, I can do that by combining my selector and saying select the anchor tag inside the list element. 100
And remember when we're doing hierarchical selectors, there's a space between the two selectors. 101
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
this one, 103
whereas if I just said querySelector("a"), then I would get back 104
this first one. As you can see the highlighting is showing you which one we're getting back from these 105
results. 106
Now I can also combine my selectors by saying something like I want the element that has a class of 107
item that is also an li element. 108
So to do that I would say li. to specify the class which is called item. 109
And remember when you're combining selectors, 110
so things that occur in the same element, 111
then there are no spaces. 112
So whereas before it was the anchor element inside the list element, 113
so hierarchical, the child of this parent, in this case it's all in the same element. 114
It's the list item that also has a class of item. 115
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
So, for example, in this case, what do you think I will select based on this selector? 117
Five seconds, see if you can get the answer. 118
All right. 119
So this is a hierarchical selector, as you can tell by the space in between the two selectors. 120
So in this case we're looking for an anchor tag that is inside something that has an id of list. 121
So, in that case, that is going to be this one, which is a child, or rather grandchild, of this unordered 122
list with an id of list. 123
And if I hit enter we can confirm the answer. 124
Now here's a question. What if your selector matches more than one object? 125
Because if I say, for example, id list with a class of item, then you could see that all three of these 126
list items satisfy that query. 127
They all have a class of item and they're all nested under a ul with an id of list. 128
So which one do you get back? 129
Well actually, you only get back the first item in the document that satisfies that selector. 130
Now, what if you wanted all of the objects that match that selector? Well, then you would have to use a 131
slightly different method. Instead of querySelector, which sounds very singular, 132
you would have to use a method called querySelectorAll. 133
And now, by using the exact same line of code other than that word All, we get back a list of all 134
three list items that satisfy that particular selector. 135
And similar to before, 136
if you wanted to change and manipulate items in here, you would have to specify their index, because it 137
is an array. 138
Now, given that we've seen all of these different types of ways of selecting our HTML elements, which 139
one should you actually use? 140
Well, querySelector, and it's slightly greedier brother querySelectorAll, allow for more complex 141
queries, because we're able to specify id, class, element, tag names, and combine them in order to target 142
the exact element that we want, 143
whereas the getElement methods are more broad and it's more difficult to target individual objects without 144
going in to change the HTML. 145
So, generally, in the code that you'll come across in the wild, you'll see querySelector a lot more than 146
getElement, as, in most cases, you can use querySelector and querySelectorAll to do all the things that 147
you can do 148
with the getElement methods. 149
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
and which one you'll find to be the most useful in your case. 151
Now as a challenge I want you to use what you learned in this lesson to change the text color of the 152
Google link over here. 153
So not this one but this one. 154
Now remember that, if you look at the DOM tree, that link is an anchor tag nested inside a list element, 155
so try and see if you can change its color to red. Pause the video and complete the challenge now. 156
All right. 157
So how did that go? 158
Well, remember that the anchor tag that we want to change is nested inside an li inside a ul. 159
So in order to change the color of our Google link we have to select the anchor tag and not just the 160
list item. 161
So to do that you have to tap into the document and then we have to querySelector for a anchor tag that is 162
inside a list element. 163
And now we can use this. 164
And now let's just confirm that we've got the right one. 165
There we go. And the anchor tag that we want is being highlighted, so we can now go and simply set its 166
style.color to red. 167
There we go. 168
And now that link is red. 169
Now if you tried to do this just by selecting the first list item then this will only change the color 170
of the bullet point without changing the color of the text, 171
and that is because this anchor tag is actually a separate element from the list item. 172
So maybe that was a little bit mean on my part but I hope it was fun trying it out nonetheless. 173
So in the next lesson we're going to learn more about how we can manipulate the CSS styles using Javascript. 174
So I'll see you on the next lesson.