1 00:00:00,930 --> 00:00:05,730 This lesson, we're going to look at how we can select multiple elements and there's various ways, 2 00:00:05,730 --> 00:00:10,890 just as we saw, when we select individual elements, there's various methods that are available within 3 00:00:10,890 --> 00:00:12,440 JavaScript in order to do that. 4 00:00:12,690 --> 00:00:18,840 So there's get elements by class, tag, name, there's query selector all, and also how you can iterate 5 00:00:18,990 --> 00:00:23,310 the element list looping through each one of the items contained within the list. 6 00:00:23,640 --> 00:00:30,150 So the element method query selector all gives us the ability to select a node list representing a list 7 00:00:30,150 --> 00:00:35,670 of elements matching the specific group of selectors, which are descendants of the element on which 8 00:00:35,670 --> 00:00:36,940 the method is called. 9 00:00:37,170 --> 00:00:42,090 So this is again one of my favorite ones to use, just as query selector, query selector. 10 00:00:42,100 --> 00:00:45,690 All is the one that returns back all of the matching elements. 11 00:00:45,900 --> 00:00:48,180 There's an example of how to use it. 12 00:00:48,420 --> 00:00:54,900 So the syntax is relatively the same, although we're adding in all after queries selector and that's 13 00:00:54,900 --> 00:00:59,430 going to return back a list of all the available elements on the page. 14 00:00:59,610 --> 00:01:05,220 So this is going to be returning back a node list and you can see that query selector selects the one 15 00:01:05,370 --> 00:01:08,420 and query selector all selects all of them. 16 00:01:08,430 --> 00:01:14,670 And this works similar to an array where we've got a length that's of all of the items are contained 17 00:01:14,670 --> 00:01:15,840 within that node list. 18 00:01:15,990 --> 00:01:22,410 So Courey Selector all will return back something that looks like an array and we can use length in 19 00:01:22,410 --> 00:01:28,770 order to determine how many items are available in there and then loop through them and iterate through 20 00:01:28,770 --> 00:01:29,370 all of them. 21 00:01:29,550 --> 00:01:36,330 So of course this lesson also has a challenge and the objective of this challenge is to try the different 22 00:01:36,330 --> 00:01:44,110 methods, try out query selector as well as selecting elements by class name selecting elements by tag 23 00:01:44,120 --> 00:01:49,980 name and then using a for loop or for each loop loop through and output. 24 00:01:49,980 --> 00:01:52,980 All of the items, the elements on the page. 25 00:01:53,140 --> 00:01:58,290 I'll give you a quick sneak peek of the code that we're going to be working with so you can pause the 26 00:01:58,290 --> 00:02:03,240 video at this point and try it for yourself within the editor and I'll show you the solution. 27 00:02:03,240 --> 00:02:05,160 I'll walk you through the solution coming up. 28 00:02:05,160 --> 00:02:08,820 First, create a list of elements so we can call it list. 29 00:02:09,090 --> 00:02:13,650 And using that same format where we've got document, we're going to select elements. 30 00:02:13,770 --> 00:02:18,330 And as you can see, Brackets is giving me a few different options here so we can select elements by 31 00:02:18,330 --> 00:02:20,820 class, name by name, by tag name. 32 00:02:21,000 --> 00:02:26,880 So class name is used quite often as well, and we can select the elements via the class name. 33 00:02:26,890 --> 00:02:33,270 So let's go back into our HTML and we can see that we've got various elements with the class of first. 34 00:02:33,510 --> 00:02:37,410 So how about we select all of the elements with a class of first? 35 00:02:37,440 --> 00:02:42,870 And when I refresh this and if I look at what's contained within the element list, we've got what's 36 00:02:42,870 --> 00:02:44,720 known as an HTML collection. 37 00:02:45,060 --> 00:02:48,330 So this gives us all the elements that match their criteria. 38 00:02:48,450 --> 00:02:51,480 And we also have a link to this particular object. 39 00:02:51,690 --> 00:02:56,380 So if we wanted to, we could type element list and we can return back the length. 40 00:02:56,400 --> 00:03:00,960 Now we know that when we have a link, then that means that we can really easily iterate through all 41 00:03:00,960 --> 00:03:02,280 of the elements that are available. 42 00:03:02,310 --> 00:03:07,770 There's also another one that we can select at by the elements, by TAG. 43 00:03:07,770 --> 00:03:15,180 So let's just use list again and overwriting that original object that we that we selected and this 44 00:03:15,180 --> 00:03:16,860 time we're going to use by tag name. 45 00:03:16,860 --> 00:03:24,030 So selecting all the elements with spane tag and we'll cancel log out Elementalist, save us a little 46 00:03:24,030 --> 00:03:25,350 bit of time from writing. 47 00:03:25,350 --> 00:03:31,260 It can see that we've got an HTML collection and once again we get all the elements with the spane when 48 00:03:31,260 --> 00:03:36,000 we hover over them, when the console you're going to see, they light up at the top there in the browser 49 00:03:36,300 --> 00:03:42,720 and they can open it up and you can see all of the properties of that particular object that we've selected. 50 00:03:42,720 --> 00:03:46,500 And again, ton of information there that's available to us in JavaScript. 51 00:03:46,500 --> 00:03:53,340 Then, of course, my favorite way to select elements to select multiple elements is query selector 52 00:03:53,340 --> 00:03:53,760 all. 53 00:03:53,770 --> 00:03:56,730 And this is the one that I quite honestly use the most. 54 00:03:56,730 --> 00:04:02,370 And this also uses the CSA style syntax so we can select the span's. 55 00:04:02,850 --> 00:04:05,460 In this case, we're returning back a node list. 56 00:04:05,700 --> 00:04:09,180 So this is different than the HTML collection. 57 00:04:09,180 --> 00:04:09,870 Similar. 58 00:04:10,020 --> 00:04:16,530 We also return back the length, but it is defined as a node list so we can loop through them just as 59 00:04:16,530 --> 00:04:16,980 before. 60 00:04:16,980 --> 00:04:21,750 So creating a simple form in the for loop is the one that's always going to work for the different types 61 00:04:21,750 --> 00:04:27,140 of lists, whereas the for each will only work for the node list because we know that just like an array, 62 00:04:27,390 --> 00:04:35,310 the node list is going to start with zero index value and looping through while l'Est is less than l'Est 63 00:04:35,310 --> 00:04:39,600 length and then incrementing ie so that we have a way out of our loop. 64 00:04:39,840 --> 00:04:46,620 So this is one way to get all of the element contents so we can simplify it and get that list. 65 00:04:46,950 --> 00:04:54,360 And using the index value we can return back the values or console log out l so you can see it's going 66 00:04:54,360 --> 00:04:58,350 to list through, it's going to log out all the different elements on separate lines. 67 00:04:58,350 --> 00:05:00,300 You can also update those. 68 00:05:00,380 --> 00:05:07,220 Elements, so while you're iterating through and you've got that element selected as an object, you 69 00:05:07,220 --> 00:05:11,750 can update its text content and there's going to be a little bit more on that coming up in the upcoming 70 00:05:11,750 --> 00:05:15,480 lesson so we can easily update these values. 71 00:05:15,800 --> 00:05:22,670 So how about we do an AI plus one, use rounded brackets to separate out that the value and then we'll 72 00:05:22,670 --> 00:05:27,480 just type in updated and now we can see that it actually updates all those elements. 73 00:05:27,480 --> 00:05:31,610 So we've got update one updated to update it, three, four, five, six, seven. 74 00:05:31,880 --> 00:05:36,770 And if we didn't do the plus one, this is zero base, so we're starting at zero. 75 00:05:36,770 --> 00:05:38,100 So it would have started with zero. 76 00:05:38,240 --> 00:05:43,430 There's also another way to loop through this node list so you can get that element list. 77 00:05:43,730 --> 00:05:49,850 And using JavaScript for each method looping through, you can get the function and as well as element 78 00:05:50,000 --> 00:05:54,230 and you can return back the index value of that element as well. 79 00:05:54,410 --> 00:06:00,230 So if we console log out the index and as we loop through, you're going to see that we get all of those 80 00:06:00,230 --> 00:06:01,580 indexes being returned back. 81 00:06:01,610 --> 00:06:04,670 So that's this one here where we've got zero one, two, three, four, five. 82 00:06:04,880 --> 00:06:10,530 And with the index, we can access the elements within the node list, just as we would with an array. 83 00:06:10,760 --> 00:06:12,770 So there's an option there as well. 84 00:06:12,950 --> 00:06:18,620 And if we want to update the element, text content, because now we've got it within the L object, 85 00:06:18,620 --> 00:06:21,710 we can update the text content just as we did up here. 86 00:06:22,010 --> 00:06:24,670 This is a little bit cleaner way to do this. 87 00:06:25,010 --> 00:06:27,970 And how about we use a template literal in order to do this? 88 00:06:27,980 --> 00:06:34,670 So the rounded curly brackets in order to indicate the index value and then we'll type updated so that 89 00:06:34,670 --> 00:06:37,200 will update that content that's contained. 90 00:06:37,200 --> 00:06:38,660 And then each one of those elements. 91 00:06:38,850 --> 00:06:44,450 And as you can see, when you go into the element list within the Elements tab, you can see all of 92 00:06:44,450 --> 00:06:46,480 these elements are updated. 93 00:06:46,700 --> 00:06:50,390 So we've got all of these span's that have been updated with the new values. 94 00:06:50,390 --> 00:06:54,780 And the nice thing about it is that you can really easily change your selector. 95 00:06:54,800 --> 00:07:00,620 So, for instance, if we were if we comment this one out and this one is going to do the span's as 96 00:07:00,620 --> 00:07:06,740 well, you can see we're actually throwing an error because we're not able to use the for each with 97 00:07:07,010 --> 00:07:08,980 the each HTML list. 98 00:07:08,990 --> 00:07:10,390 So that's something to keep in mind. 99 00:07:10,790 --> 00:07:16,010 So when you are using the get elements by tag name or get elements by class name, keep in mind you 100 00:07:16,010 --> 00:07:17,270 can't use the foreach. 101 00:07:17,270 --> 00:07:19,280 The foreach is only for the node list. 102 00:07:19,290 --> 00:07:22,810 So even though they do look the same, there are subtle differences. 103 00:07:23,030 --> 00:07:29,180 So let's go back into here and let's select the elements with the class of first and we'll make the 104 00:07:29,180 --> 00:07:33,620 updates to those so you can see that we found one there, one there, one there, one there, one there. 105 00:07:33,890 --> 00:07:35,480 And you can do a whole bunch of stuff. 106 00:07:35,490 --> 00:07:43,580 So even as we saw in the last lesson where we can update the element style and background color so we 107 00:07:43,580 --> 00:07:48,770 can set all of the background colours to read if we want, I'll just use single quotes so all of them 108 00:07:48,770 --> 00:07:54,150 get updated to read and it makes it really easy to select those elements and manipulate them. 109 00:07:54,530 --> 00:07:55,910 So go ahead and try this out. 110 00:07:55,910 --> 00:07:59,120 And coming up, I show you a little bit more on element manipulation. 111 00:07:59,120 --> 00:08:05,210 And this is really cool because it gives you so many nice ways to really easily update the visible content 112 00:08:05,210 --> 00:08:05,960 within the page.