WEBVTT 0 00:00.160 --> 00:01.370 Welcome back guys. 1 00:01.440 --> 00:07.800 So, as you saw in the previous lesson, we were able to use Javascript to select HTML elements and change 2 00:07.860 --> 00:09.450 its color property. 3 00:09.450 --> 00:15.180 Now I showed you one way of doing this using a method called querySelector, but there's actually a 4 00:15.180 --> 00:17.390 lot more ways that you can do this. 5 00:17.430 --> 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 00:23.940 --> 00:27.420 ways of selecting elements inside the DOM. 7 00:27.420 --> 00:37.140 Now the first one I want to show you is the getElementsByTagName, and what this does is that it looks 8 00:37.260 --> 00:43.710 through the web page and it searches for the element with a particular tag name. 9 00:43.710 --> 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 00:52.110 --> 00:53.130 list. 11 00:53.130 --> 00:59.550 If we run this line of code, getElementsByTagName, then you'll see that we actually get back an 12 00:59.550 --> 01:03.490 array that contains all three of our list items. 13 01:03.540 --> 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 01:08.550 --> 01:10.820 tap into and you can manipulate. 15 01:11.070 --> 01:16.390 Now, the important thing about this method, and where it differs from the previous one that we used, 16 01:16.420 --> 01:22.710 which is querySelector, is, if you notice, the word elements is plural here, 17 01:22.800 --> 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 01:29.940 --> 01:32.220 So it's not just going to fetch one. 19 01:32.280 --> 01:36.960 Now this is important because when you try to manipulate one of these elements, 20 01:37.040 --> 01:42.970 so if we try to tap into the third list item, then we can simply say getElementsByTagName, 21 01:43.050 --> 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 01:51.390 --> 01:57.480 work, because, even though the error that you get is a little bit misleading, it says Cannot set property 23 01:57.510 --> 01:59.200 of undefined, 24 01:59.280 --> 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 02:05.700 --> 02:10.770 remember, this part of the code gives us back this array with all three list items, 26 02:11.010 --> 02:15.040 and if we try to set its style property, that doesn't make any sense. 27 02:15.060 --> 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 02:22.110 --> 02:26.540 remember when we select items in arrays we always use the square brackets. 29 02:26.580 --> 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 02:32.640 --> 02:36.080 style.color = "purple", then you can see that it's changed 31 02:36.100 --> 02:40.470 our third list item to a purple text. 32 02:40.500 --> 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 02:46.260 --> 02:52.850 about arrays in detail and you can get to grips with this idea before you head back and we continue. 34 02:52.930 --> 02:59.940 Now in addition to being able to tap into a particular element inside this array of items that all have 35 02:59.940 --> 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 03:04.890 --> 03:09.860 for example, if we wanted to know how many elements there were that have the tag name li, 37 03:10.200 --> 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 03:16.620 --> 03:21.650 and that will tell us that there are 3 li items in total on this entire page. 39 03:21.750 --> 03:23.130 So that's pretty neat. 40 03:23.130 --> 03:28.790 Now, along this line of getElementBy, you can see that there's a whole bunch of other ones, 41 03:28.860 --> 03:33.150 and another useful one is getElementsByClassName. 42 03:33.180 --> 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 03:40.650 --> 03:42.120 here in our web page, 44 03:42.120 --> 03:44.370 I've given a class to some of these elements. 45 03:44.430 --> 03:48.530 So for example the button element has a class of btn. 46 03:48.690 --> 03:55.770 So we can select that button by saying document.getElementsByClassName, and then inside here 47 03:55.770 --> 03:59.060 we'll add the class btn. 48 03:59.190 --> 04:04.650 Now notice this method also has a plural, Elements. 49 04:04.650 --> 04:08.660 So that means that we're also going to get back an array. 50 04:08.820 --> 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 04:16.140 --> 04:18.020 to give you back an array. 52 04:18.090 --> 04:24.630 So that means that doing this also does not work. 53 04:24.630 --> 04:30.780 And so even if there's only one item that has that particular class that you're selecting, you still 54 04:30.780 --> 04:36.660 have to select the first item using the square brackets and using the index 0. 55 04:36.660 --> 04:45.000 Now the final one in this style of getElementsBy is the getElementById. And the keen eyed amongst 56 04:45.000 --> 04:49.980 you might have noticed that in this case the word Element is no longer plural, 57 04:50.130 --> 04:56.550 and so in fact using this method you only get back one item instead of an array, 58 04:56.730 --> 05:02.080 and the reason being, of course, that, on a single web page, every single id should be unique, 59 05:02.090 --> 05:05.430 so you should not have the same id on more than one element. 60 05:05.450 --> 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 05:13.240 --> 05:14.480 our h1. 62 05:14.510 --> 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 05:22.730 --> 05:25.460 And in this case we're getting back our h1. 64 05:25.460 --> 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 05:31.790 --> 05:37.170 title, and then change its innerHTML to say, I don't know, Good Bye. 66 05:37.220 --> 05:42.500 Now that text has gone from Hello to Good Bye by selecting it and then manipulating it. 67 05:42.560 --> 05:48.080 Now, another method that can be used to select a single element is the querySelector method that we 68 05:48.080 --> 05:50.260 already saw in the last lesson. 69 05:50.270 --> 05:58.100 Now this method, similar to getElementById, also only returns a single item, but it works a little bit 70 05:58.100 --> 06:04.820 differently, because the string that you're going to put inside the parentheses is a selector. 71 06:04.820 --> 06:06.120 Now what are selectors? 72 06:06.170 --> 06:08.610 Well, we've been using it in our CSS 73 06:08.840 --> 06:10.110 all of this time. 74 06:10.220 --> 06:14.090 Here's the styles.css us for our TinDog web site. 75 06:14.270 --> 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 06:21.560 --> 06:22.280 braces. 77 06:22.430 --> 06:27.950 So to select elements we simply just write the name of the element, to select classes 78 06:27.980 --> 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 06:35.180 --> 06:39.510 And of course with selectors we can combine different things, 80 06:39.530 --> 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 06:46.910 --> 06:51.090 a particular thing inside your web site in order to change. 82 06:51.320 --> 06:57.900 So let's head back over here and let's use our querySelector to select something. 83 06:57.920 --> 07:01.660 So whereas before, when I used getElementById, 84 07:01.760 --> 07:07.790 I could only specify a valid id, and when it does getElementsByClass then I could only put in a class, 85 07:08.150 --> 07:08.860 inside here 86 07:08.870 --> 07:11.830 I could put in an element, a class, or an id, 87 07:11.840 --> 07:13.000 it doesn't really matter. 88 07:13.130 --> 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 07:21.260 --> 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 07:29.570 --> 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 07:35.870 --> 07:36.380 thing. 92 07:36.650 --> 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 07:43.340 --> 07:44.950 as we did inside the CSS. 94 07:44.960 --> 07:51.000 So if I wanted our button then I can just say .btn and I would get back our button. 95 07:51.140 --> 07:58.430 But more importantly, I can combine our selectors and query for something that's quite specific. 96 07:58.460 --> 08:03.040 So for example we've got a link here inside our first list item. 97 08:03.050 --> 08:07.340 Now let's say that we have another link that's just free floating around, 98 08:07.550 --> 08:12.630 and I only wanted to select the link that was inside the list item. 99 08:12.800 --> 08:19.220 Well, I can do that by combining my selector and saying select the anchor tag inside the list element. 100 08:19.560 --> 08:24.740 And remember when we're doing hierarchical selectors, there's a space between the two selectors. 101 08:24.740 --> 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 08:32.180 --> 08:33.140 this one, 103 08:33.140 --> 08:37.460 whereas if I just said querySelector("a"), then I would get back 104 08:37.460 --> 08:42.860 this first one. As you can see the highlighting is showing you which one we're getting back from these 105 08:42.860 --> 08:44.410 results. 106 08:44.540 --> 08:51.680 Now I can also combine my selectors by saying something like I want the element that has a class of 107 08:51.740 --> 08:54.760 item that is also an li element. 108 08:54.800 --> 09:00.780 So to do that I would say li. to specify the class which is called item. 109 09:00.950 --> 09:03.410 And remember when you're combining selectors, 110 09:03.410 --> 09:06.160 so things that occur in the same element, 111 09:06.200 --> 09:08.210 then there are no spaces. 112 09:08.210 --> 09:14.750 So whereas before it was the anchor element inside the list element, 113 09:14.780 --> 09:20.580 so hierarchical, the child of this parent, in this case it's all in the same element. 114 09:20.660 --> 09:26.240 It's the list item that also has a class of item. 115 09:26.270 --> 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 09:33.920 --> 09:39.550 So, for example, in this case, what do you think I will select based on this selector? 117 09:39.560 --> 09:41.800 Five seconds, see if you can get the answer. 118 09:46.170 --> 09:46.530 All right. 119 09:46.530 --> 09:52.420 So this is a hierarchical selector, as you can tell by the space in between the two selectors. 120 09:52.680 --> 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 09:59.850 --> 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 10:07.590 --> 10:09.390 list with an id of list. 123 10:09.840 --> 10:13.150 And if I hit enter we can confirm the answer. 124 10:14.590 --> 10:20.890 Now here's a question. What if your selector matches more than one object? 125 10:20.890 --> 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 10:30.280 --> 10:33.000 list items satisfy that query. 127 10:33.010 --> 10:40.780 They all have a class of item and they're all nested under a ul with an id of list. 128 10:40.780 --> 10:42.970 So which one do you get back? 129 10:43.150 --> 10:50.960 Well actually, you only get back the first item in the document that satisfies that selector. 130 10:50.990 --> 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 10:57.610 --> 11:04.080 slightly different method. Instead of querySelector, which sounds very singular, 132 11:04.360 --> 11:07.300 you would have to use a method called querySelectorAll. 133 11:07.420 --> 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 11:15.820 --> 11:19.790 three list items that satisfy that particular selector. 135 11:19.930 --> 11:21.240 And similar to before, 136 11:21.250 --> 11:28.360 if you wanted to change and manipulate items in here, you would have to specify their index, because it 137 11:28.360 --> 11:30.100 is an array. 138 11:30.100 --> 11:37.060 Now, given that we've seen all of these different types of ways of selecting our HTML elements, which 139 11:37.060 --> 11:38.850 one should you actually use? 140 11:38.950 --> 11:45.820 Well, querySelector, and it's slightly greedier brother querySelectorAll, allow for more complex 141 11:45.820 --> 11:54.100 queries, because we're able to specify id, class, element, tag names, and combine them in order to target 142 11:54.100 --> 11:56.270 the exact element that we want, 143 11:56.440 --> 12:02.740 whereas the getElement methods are more broad and it's more difficult to target individual objects without 144 12:02.740 --> 12:04.640 going in to change the HTML. 145 12:04.660 --> 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 12:10.240 --> 12:17.440 getElement, as, in most cases, you can use querySelector and querySelectorAll to do all the things that 147 12:17.440 --> 12:17.990 you can do 148 12:18.000 --> 12:19.950 with the getElement methods. 149 12:20.290 --> 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 12:26.590 --> 12:31.150 and which one you'll find to be the most useful in your case. 151 12:31.150 --> 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 12:38.620 --> 12:40.450 Google link over here. 153 12:40.450 --> 12:43.150 So not this one but this one. 154 12:43.150 --> 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 12:51.790 --> 12:58.770 so try and see if you can change its color to red. Pause the video and complete the challenge now. 156 12:58.810 --> 12:59.170 All right. 157 12:59.170 --> 13:00.720 So how did that go? 158 13:00.970 --> 13:08.580 Well, remember that the anchor tag that we want to change is nested inside an li inside a ul. 159 13:08.590 --> 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 13:14.590 --> 13:16.210 list item. 161 13:16.210 --> 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 13:25.330 --> 13:27.860 inside a list element. 163 13:28.350 --> 13:30.380 And now we can use this. 164 13:30.410 --> 13:33.160 And now let's just confirm that we've got the right one. 165 13:33.260 --> 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 13:39.340 --> 13:42.700 style.color to red. 167 13:42.700 --> 13:43.350 There we go. 168 13:43.510 --> 13:46.000 And now that link is red. 169 13:46.060 --> 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 13:53.140 --> 13:58.030 of the bullet point without changing the color of the text, 171 13:58.420 --> 14:03.920 and that is because this anchor tag is actually a separate element from the list item. 172 14:04.000 --> 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 14:08.830 --> 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 14:15.170 --> 14:16.940 So I'll see you on the next lesson.