1 00:00:00,330 --> 00:00:06,120 Element selection is key to being able to work with the elements on the page, you need to be able to 2 00:00:06,120 --> 00:00:09,280 select the element properly if you're familiar with success. 3 00:00:09,300 --> 00:00:10,530 The process is the same. 4 00:00:10,680 --> 00:00:14,760 You select the element and then you make the updates to the properties and values. 5 00:00:14,970 --> 00:00:16,700 So JavaScript, same idea. 6 00:00:16,710 --> 00:00:19,070 In this lesson, we're going to be exploring how to select an element. 7 00:00:19,080 --> 00:00:24,150 There's various ways to select elements and then we're going to be updating the background color of 8 00:00:24,150 --> 00:00:25,950 that element that we've selected. 9 00:00:26,280 --> 00:00:32,340 So the objective is to try to pick out an element on the page and find something that's unique enough 10 00:00:32,340 --> 00:00:33,450 that you can identify it. 11 00:00:33,750 --> 00:00:40,170 And of course, ID is one of the most unique ways to have elements on the page assigning them an ID 12 00:00:40,170 --> 00:00:45,290 because every element can on the page can only have one unique ID. 13 00:00:45,450 --> 00:00:51,780 You can also select it via tags or class, and sometimes you will return back even more elements than 14 00:00:51,780 --> 00:00:53,010 the one that you're trying to select. 15 00:00:53,220 --> 00:00:54,990 And there is a way to handle that. 16 00:00:55,000 --> 00:00:56,670 That's coming up in the upcoming lesson. 17 00:00:57,030 --> 00:00:59,970 And you can also use CSFs type selectors. 18 00:01:00,120 --> 00:01:05,040 So we've got a lot of options to make the selection and it's up to you, whichever one you prefer. 19 00:01:05,190 --> 00:01:09,270 Personally, I do prefer using query selector because it's almost like CSI. 20 00:01:09,630 --> 00:01:14,310 And as you can see in the example, on the right hand side, we do the same thing where we've got an 21 00:01:14,310 --> 00:01:21,930 ID using the hash as a pretext to the name of a class is prefixed with a dot and the tags don't have 22 00:01:21,930 --> 00:01:22,530 any prefix. 23 00:01:22,680 --> 00:01:26,280 So exact same thing that you'd expect and that you've seen with success. 24 00:01:26,520 --> 00:01:32,010 And once we've select that element, then we have access to its style attribute and we can update the 25 00:01:32,010 --> 00:01:33,870 background color to whatever we want. 26 00:01:34,140 --> 00:01:39,270 And also with the CSA selectors, they're going to work the same way where we've got a list item and 27 00:01:39,270 --> 00:01:43,730 we can select our first child, we can select our last child, and we can also use anthe child. 28 00:01:43,860 --> 00:01:48,000 So these are CSA selectors and they work when you're using query selector. 29 00:01:48,120 --> 00:01:51,570 And that's why, again, one of my favorite ones to use is the query selector. 30 00:01:51,690 --> 00:01:57,810 And oftentimes if you do have elements given an ID, this is one of the most basic ways to make that 31 00:01:57,810 --> 00:01:58,260 connection. 32 00:01:58,260 --> 00:02:03,420 So that's just using get element by ID selecting the elements within the various IDs. 33 00:02:03,690 --> 00:02:08,730 You can see there's more information about the query selector available at the Mozilla Developer Network. 34 00:02:08,730 --> 00:02:14,280 They also have an example, of course, where we're selecting and we can select it within access type 35 00:02:14,280 --> 00:02:14,730 style. 36 00:02:14,880 --> 00:02:18,780 So they've got some HTML and then they're making a selection of those elements. 37 00:02:18,900 --> 00:02:21,030 And Query Selector is quite flexible. 38 00:02:21,030 --> 00:02:28,040 So we can select the paragraph, we can select the ID here as well, and we can also use the CSF selectors. 39 00:02:28,040 --> 00:02:33,810 So div span giving us some more details on the ability to make those selections. 40 00:02:33,990 --> 00:02:36,420 And then this works with any HTML. 41 00:02:36,510 --> 00:02:41,400 And as we saw earlier, all we need to do is select and then we can update and utilize Java. 42 00:02:42,120 --> 00:02:48,000 So there is a challenge of course for this lesson and that's to select XHTML elements from the page 43 00:02:48,000 --> 00:02:50,100 and update the background color. 44 00:02:50,250 --> 00:02:56,760 So try it out in a few different formats, selecting by the ID and then also try even by the class, 45 00:02:56,940 --> 00:03:04,740 by the tag name and also try some key selector types as well, selecting various elements, updating 46 00:03:04,740 --> 00:03:05,760 their background colour. 47 00:03:05,910 --> 00:03:10,440 You can change them to all kinds of different background colours, have some fun with it, experiment 48 00:03:10,440 --> 00:03:13,110 with making selection and get more familiar with it. 49 00:03:13,290 --> 00:03:19,140 I've got a quick sneak peek at the solution code so you can pause the video here and try it for yourself 50 00:03:19,140 --> 00:03:20,220 and I'll show you the solution. 51 00:03:20,220 --> 00:03:22,230 I'll walk you through the solution coming up. 52 00:03:22,620 --> 00:03:27,090 So opening up our Ed, we're still using that same index, that HTML file. 53 00:03:27,240 --> 00:03:31,290 So we've got some elements here that we can select and make use of. 54 00:03:31,560 --> 00:03:34,680 So first that we want to do is select some elements. 55 00:03:34,680 --> 00:03:38,700 So we're going to just console log these elements out into the console. 56 00:03:38,910 --> 00:03:44,100 So using document in order to make the selection of the document object, it's got a bunch of methods 57 00:03:44,100 --> 00:03:44,970 that are attached to it. 58 00:03:45,120 --> 00:03:51,510 So the get element by ID method will return the element with the specific ID and in this case you can 59 00:03:51,510 --> 00:03:52,920 single coat, you can double code. 60 00:03:53,100 --> 00:03:59,400 I'm going to use single quotes here and we're all we need to do is specify the ID value of the element. 61 00:03:59,410 --> 00:04:04,320 So going back to the HTML, you can see I've got one element up here with an ID. 62 00:04:04,500 --> 00:04:07,470 So this is the one that I'm selecting in the console. 63 00:04:07,650 --> 00:04:13,050 When we refresh and you hover over the element in the console, you can see it highlights and blew up 64 00:04:13,050 --> 00:04:14,490 above within the Web page. 65 00:04:14,640 --> 00:04:19,740 So that means that we've selected it properly and then we're ready to make some updates and manipulation. 66 00:04:20,040 --> 00:04:26,820 So the other option was to use query selector so we can select that again, the same format and accept 67 00:04:26,820 --> 00:04:29,430 the method is different where we're using query selector. 68 00:04:29,700 --> 00:04:33,240 And in this case, again, we can use single or double quotes. 69 00:04:33,240 --> 00:04:33,930 It doesn't matter. 70 00:04:33,930 --> 00:04:36,030 I'll just use single quotes to be consistent. 71 00:04:36,330 --> 00:04:42,980 And in this case, because it is S.O.S type selection, we need to include the hash in front of the 72 00:04:42,990 --> 00:04:45,660 my ID, otherwise it's going to try to select the tag. 73 00:04:45,870 --> 00:04:51,270 So next we log that out and we been able to select that same element in two different ways. 74 00:04:51,420 --> 00:04:56,280 And you'll find that there's a lot of different ways to select the same element and you just have to 75 00:04:56,280 --> 00:04:59,790 be creative in order to select the right elements that. 76 00:04:59,900 --> 00:05:03,870 You want to use and how you make the selection is really up to you. 77 00:05:04,370 --> 00:05:09,530 Let's try a few more so we'll cons. logout and again, using the document object. 78 00:05:09,530 --> 00:05:12,530 And I did mention we are going to be using it all the time. 79 00:05:12,830 --> 00:05:16,680 So you're going to get really familiar with it by the end of this section. 80 00:05:16,910 --> 00:05:20,650 So next, what we want to do is select an element with a class. 81 00:05:20,660 --> 00:05:25,100 So we have a little bit of variety here and we can see that within the console. 82 00:05:25,250 --> 00:05:30,350 We've selected that first element with the class of first and you can see the contents of it. 83 00:05:30,560 --> 00:05:36,950 So this is that full div and we got all of the elements that are inside of there as well that's being 84 00:05:36,950 --> 00:05:37,820 returned back. 85 00:05:37,970 --> 00:05:43,760 And there's going to be more on this later on, how you can make use of that next console log and to 86 00:05:43,760 --> 00:05:45,130 have some more variety. 87 00:05:45,140 --> 00:05:47,690 Let's select the first div on the page. 88 00:05:47,960 --> 00:05:54,440 And when you're using query selector and you're selecting elements that have a possibility of more than 89 00:05:54,440 --> 00:05:57,660 one being returned, you're going to get the first one being returned back. 90 00:05:58,070 --> 00:06:03,740 So next, we've got the div and looks like we've selected that same one with the ID. 91 00:06:03,890 --> 00:06:08,240 And you can see it's again being selected because this is the first div on the page. 92 00:06:08,600 --> 00:06:14,690 If you want to be more creative with the elements that you're selecting, you can go through using more 93 00:06:14,840 --> 00:06:17,120 complex success selectors. 94 00:06:17,540 --> 00:06:22,070 You can also, as we saw, we can make updates, manipulation of the element. 95 00:06:22,370 --> 00:06:24,830 So let's do another query selection. 96 00:06:25,100 --> 00:06:30,590 So always first select the element that you want to use and in this case will select the first spane 97 00:06:30,590 --> 00:06:31,340 on the page. 98 00:06:31,520 --> 00:06:39,680 So specify spane as the tag and then we can use style properties and you can see that with style brackets 99 00:06:39,680 --> 00:06:41,990 is returning back a whole bunch of options. 100 00:06:42,200 --> 00:06:44,450 So literally anything can do a success. 101 00:06:44,570 --> 00:06:46,640 You can do with the style attribute. 102 00:06:46,850 --> 00:06:51,620 So typically whatever you'd put within the style attribute of an element, you can do that via JavaScript. 103 00:06:52,480 --> 00:06:57,250 And then setting the background color and then you can set the background color to whatever you want 104 00:06:57,250 --> 00:06:59,780 it to set it to this case, I'm going to set it to yellow. 105 00:06:59,950 --> 00:07:03,650 So the first span on the page gets a background color of yellow. 106 00:07:03,970 --> 00:07:11,500 Let's try a few more and we'll set some different colors and we'll update these values as well to select 107 00:07:11,500 --> 00:07:12,340 different elements. 108 00:07:12,650 --> 00:07:16,840 So do blue and we'll have a whole rainbow of different colors. 109 00:07:17,140 --> 00:07:18,340 We can do red as well. 110 00:07:18,580 --> 00:07:20,500 So we're selecting the span. 111 00:07:20,500 --> 00:07:27,360 We can also select the element that's first span and that should return back the same one. 112 00:07:27,580 --> 00:07:34,870 And notice, just as we would with CSF, you can overwrite the value of the element style attribute. 113 00:07:35,050 --> 00:07:41,350 And also just to show you as well that when we look make this bigger so we can see it better when we 114 00:07:41,350 --> 00:07:47,410 go into the elements, you can see that these elements, the ones that we are selecting, are getting 115 00:07:47,410 --> 00:07:49,480 the style attribute added in. 116 00:07:49,510 --> 00:07:50,830 So this is just manipulated. 117 00:07:50,830 --> 00:07:56,020 And of course, when we reload the page, if we don't have the JavaScript within the code, then the 118 00:07:56,020 --> 00:07:58,460 span is going to stay as it was, as it was written. 119 00:07:58,460 --> 00:08:01,540 And then the court, the female code, let's select something different. 120 00:08:01,540 --> 00:08:07,720 We've got a bunch of list items so we can select our list item and turn that one green so that one turns 121 00:08:07,720 --> 00:08:08,020 green. 122 00:08:08,200 --> 00:08:14,290 And we can be more creative with using CSF selectors so we can do something like the last child if we 123 00:08:14,290 --> 00:08:15,810 wanted the last one to be green. 124 00:08:16,150 --> 00:08:23,260 Also, if we want to be really specific, maybe we have a few different lists or something, different 125 00:08:23,260 --> 00:08:28,090 reasons why we want to make that selection be more specific so we can do the first child. 126 00:08:28,090 --> 00:08:32,230 So that's another success selector that you typically would see and use. 127 00:08:32,360 --> 00:08:33,730 So we're just selecting the first one. 128 00:08:33,850 --> 00:08:38,320 So the list item, because this is the first one on the page, this is being returned back. 129 00:08:38,440 --> 00:08:43,300 But again, you can be even more specific and you can also specify the unordered list. 130 00:08:43,300 --> 00:08:47,620 If there's a class that's the class second list item, first child. 131 00:08:47,740 --> 00:08:52,630 So really, really specific, Boeung, I try to keep them fairly short and consistent. 132 00:08:52,840 --> 00:08:58,420 You can also do the ninth child and this is another success type selector. 133 00:08:58,600 --> 00:09:04,210 So select the second and third child and that's going to return back this item. 134 00:09:04,210 --> 00:09:06,310 So this is the second one in the list. 135 00:09:06,310 --> 00:09:09,310 And if you do fourth one in the list, you get somewhere in the middle there. 136 00:09:09,500 --> 00:09:10,300 So number four. 137 00:09:10,870 --> 00:09:12,760 So go ahead, try this out for yourself. 138 00:09:13,060 --> 00:09:13,900 Have some fun with it.