1 00:00:00,450 --> 00:00:04,860 All right guys so now that we know what the dorm is we've examined a little bit now we're going to take 2 00:00:04,860 --> 00:00:06,670 a look at Dohm selectors. 3 00:00:06,690 --> 00:00:06,990 OK. 4 00:00:06,990 --> 00:00:12,210 So these are Document object methods that allow us to basically pull things from the dorm and then we 5 00:00:12,210 --> 00:00:15,170 can do different things with the elements or the nodes. 6 00:00:15,420 --> 00:00:22,680 Jay Querrey was used for a long time to do this stuff for DOM manipulation and Dom selection but vanilla 7 00:00:22,680 --> 00:00:29,750 Javascript has gotten much easier to work with and I almost never suggest a query as it's unnecessary 8 00:00:29,760 --> 00:00:33,240 most of the time it just adds bloat to your application. 9 00:00:33,240 --> 00:00:39,840 One good thing Jake where he is good for is quick simple plug ins or scripts that you need to do a specific 10 00:00:39,840 --> 00:00:44,360 action but I never suggested for DOM manipulation any more. 11 00:00:44,490 --> 00:00:44,820 All right. 12 00:00:44,820 --> 00:00:50,850 So basically in vanilla javascript we have a couple different selectors that can be categorized into 13 00:00:50,850 --> 00:00:54,900 two different types single element and multiple elements selectors. 14 00:00:54,900 --> 00:01:01,860 So single elements selectors will allow you to grab one element by its ID or its class or whatever it 15 00:01:01,860 --> 00:01:04,720 may be and it only stores one thing. 16 00:01:04,890 --> 00:01:10,320 So if you use a single element selector on let's say a class that appears more than once in the dorm 17 00:01:10,560 --> 00:01:12,960 it's just going to grab the first one. 18 00:01:13,020 --> 00:01:16,020 OK it's just going to grab that single first one. 19 00:01:16,020 --> 00:01:21,850 Now multiple elements selectors will actually get all of the elements with that class and then return 20 00:01:21,850 --> 00:01:26,550 in each team collection or a node list depending on which selector you use. 21 00:01:26,550 --> 00:01:32,970 So we've already seen an example of NHT all collection in the last video when we selected items directly 22 00:01:32,970 --> 00:01:34,660 with document properties. 23 00:01:34,660 --> 00:01:37,980 OK remember we looked at the forms in the links and all that. 24 00:01:37,980 --> 00:01:42,660 So in this video we're going to take a look at the two single elements selectors. 25 00:01:42,660 --> 00:01:42,990 All right. 26 00:01:42,990 --> 00:01:46,410 So the first one is get aliment by D. 27 00:01:46,610 --> 00:01:51,980 Or actually document dot get element by ID. 28 00:01:52,200 --> 00:01:57,200 OK and this just does just what it says it selects things by their IDs. 29 00:01:57,210 --> 00:02:02,340 OK so you can't select a class or a tag or anything like that. 30 00:02:02,370 --> 00:02:05,530 The next selector we're going to get into is much more flexible. 31 00:02:05,550 --> 00:02:12,080 This one has been around for a long time so let's go ahead and take a look at our document. 32 00:02:12,090 --> 00:02:12,450 All right. 33 00:02:12,450 --> 00:02:20,010 Now we have an I.D. or is it this H5 right here has an idea of task titles so let's say we want to select 34 00:02:20,010 --> 00:02:22,630 this H5 which is this right here. 35 00:02:22,920 --> 00:02:35,220 All right so we can actually just console larget by saying document Daut get element by D and then we 36 00:02:35,220 --> 00:02:39,820 want task Dasch title. 37 00:02:39,920 --> 00:02:40,260 All right. 38 00:02:40,260 --> 00:02:45,280 Now if I save that you'll see that down here in the console it'll actually show the H5. 39 00:02:45,430 --> 00:02:48,170 OK just like it is in the DOM. 40 00:02:48,300 --> 00:02:51,090 Now we can get things from it as well. 41 00:02:51,090 --> 00:02:56,180 So I'm going to show you just a couple of different things that we can do when we select an item and 42 00:02:56,190 --> 00:03:02,670 this is stuff we'll be doing throughout the course so we can get things from the eye or the elements 43 00:03:03,750 --> 00:03:08,450 like let's say we want to get its ID which we already know because that's what we fetched it by. 44 00:03:08,460 --> 00:03:18,830 But just to show you that we can do get element by task title and we can say Daut ID and save. 45 00:03:19,500 --> 00:03:22,720 We should probably log this. 46 00:03:22,840 --> 00:03:26,200 Let's go ahead and call this a little dog log. 47 00:03:29,850 --> 00:03:37,290 Save and now you can see that we get task titles so we can get IDs we can get classes doesn't have a 48 00:03:37,290 --> 00:03:42,150 class on it but if it did we could use a class name like that. 49 00:03:42,150 --> 00:03:50,010 Notice it's blank but if I were to put a class on this let's say class equals test and save you'll see 50 00:03:50,010 --> 00:03:51,810 we get test. 51 00:03:51,990 --> 00:03:57,150 All right so we can do that and we can get any attributes I'm going to get into more of this stuff later 52 00:03:57,150 --> 00:03:58,330 on as well. 53 00:03:58,620 --> 00:04:03,720 But I just wanted to show you that we can get so we can get stuff from it by selecting it with this 54 00:04:03,950 --> 00:04:06,020 get element by D. 55 00:04:06,060 --> 00:04:09,820 All right so we can also do things to the styling. 56 00:04:09,840 --> 00:04:13,470 So they change styling. 57 00:04:13,500 --> 00:04:20,060 So for instance let's do document I get element by id task title 58 00:04:24,420 --> 00:04:31,860 and to change any kind of styling you want to do dot style and then you want to do dot whatever property 59 00:04:31,860 --> 00:04:32,760 you want to change. 60 00:04:32,760 --> 00:04:35,170 So let's say we want to change the background. 61 00:04:35,420 --> 00:04:35,790 All right. 62 00:04:35,790 --> 00:04:43,650 So I will say background image set it to equals and then let's make it a dark Grace 2 3 3 3 and you 63 00:04:43,650 --> 00:04:44,280 can do that. 64 00:04:44,280 --> 00:04:50,550 You can do you know colors like that are R.G. be values anything that you can do in CSSA you can do 65 00:04:50,550 --> 00:04:51,820 here. 66 00:04:51,840 --> 00:04:58,260 All right so if we go ahead and save that you can see now that the now the h 5 has a bad dark background. 67 00:04:58,260 --> 00:05:02,120 All right let's say that we want to change the color now to White. 68 00:05:02,160 --> 00:05:10,080 So Will do style dog color and we'll change that to f f f which will make it white. 69 00:05:10,170 --> 00:05:12,300 Let's say you wanted to add some padding to it. 70 00:05:12,360 --> 00:05:19,120 So Will do style dog padding and we'll set that to let's say 5 pixels. 71 00:05:19,590 --> 00:05:22,860 All right so we've changed the style in javascript. 72 00:05:23,410 --> 00:05:23,840 OK. 73 00:05:23,850 --> 00:05:28,840 And a lot of times if you want to make something disappear usually you'll do this. 74 00:05:28,920 --> 00:05:34,530 It'll it'll be hooked to some kind of event like if you click a button something will disappear or something 75 00:05:34,530 --> 00:05:35,200 like that. 76 00:05:35,310 --> 00:05:39,990 What you would do is set this display to none. 77 00:05:39,990 --> 00:05:43,620 All right so if I do that I'll just completely get rid of it. 78 00:05:43,710 --> 00:05:47,420 All right but I'm going to comment that now. 79 00:05:47,700 --> 00:05:53,230 You don't want to just you don't want to do this just to style your application you usually do this. 80 00:05:53,370 --> 00:06:00,330 Like I said when you're implementing events if you hover over something and you want something to something 81 00:06:00,330 --> 00:06:07,590 else to show or disappear for dynamic functionality you're not going to use this just to style this 82 00:06:07,590 --> 00:06:10,910 heading that's you know you use VSS for that. 83 00:06:10,920 --> 00:06:16,980 He wouldn't use javascript for that but just to show you that you can change styles in javascript. 84 00:06:17,010 --> 00:06:17,330 All right. 85 00:06:17,330 --> 00:06:21,210 You can also change the content. 86 00:06:21,210 --> 00:06:27,200 So let's say I just copy this OK. 87 00:06:27,230 --> 00:06:34,370 Now there's a few different methods or properties that we can use to change content so one is text content 88 00:06:34,640 --> 00:06:35,700 like that. 89 00:06:36,220 --> 00:06:42,980 And let's set it to a task list and save and you can see it now says task list. 90 00:06:42,980 --> 00:06:43,490 All right. 91 00:06:43,560 --> 00:06:46,470 Changed the content. 92 00:06:46,520 --> 00:06:50,240 Now in addition to text content we have. 93 00:06:50,240 --> 00:06:54,730 Actually I was copy this whole thing we have in our text. 94 00:06:55,240 --> 00:07:04,960 Ok so in our text and this time we'll change it to say my tasks and save and we get my tasks. 95 00:07:05,060 --> 00:07:05,400 All right. 96 00:07:05,420 --> 00:07:13,490 Now sometimes you may want to insert age DML In fact we do that quite a bit in vanilla javascript are 97 00:07:13,490 --> 00:07:14,900 we working with the DOM. 98 00:07:15,020 --> 00:07:21,800 You want to maybe fetch something through the fecche API or Ajax or something and then you want to insert 99 00:07:21,830 --> 00:07:23,350 a chunk of HD IMAO. 100 00:07:23,480 --> 00:07:26,250 And this is where inner HVM all comes in. 101 00:07:26,270 --> 00:07:28,360 So it's go ahead. 102 00:07:28,430 --> 00:07:29,390 Copy that. 103 00:07:29,570 --> 00:07:34,330 And then instead of inner text say inner h t IMAO. 104 00:07:34,790 --> 00:07:44,930 And inside here let's just put a span like that and let's say a task list. 105 00:07:44,930 --> 00:07:54,030 And just to show you that it's actually there I'm going to put a style of color red right and save and 106 00:07:54,020 --> 00:07:56,310 now you can see it's this task list. 107 00:07:56,330 --> 00:08:02,660 It's surrounded in a span if you hover over it here you'll see a span with the color of red. 108 00:08:02,690 --> 00:08:04,300 All right so that's what we can do. 109 00:08:05,420 --> 00:08:08,630 If we want to insert each m out. 110 00:08:08,930 --> 00:08:16,450 Now what we're doing here calling this get n by the task title so many times is not is not very efficient 111 00:08:16,460 --> 00:08:20,070 we shouldn't do this what we should do is cast this into a variable. 112 00:08:20,300 --> 00:08:29,830 So we would set like Tass title and set that to get element by the 113 00:08:33,770 --> 00:08:40,580 tasks title and then take this variable and do what we want with it so we would change the styles here 114 00:08:41,180 --> 00:08:48,700 by using that variable. 115 00:08:48,750 --> 00:08:51,840 We'll use it down here to change the content. 116 00:08:56,260 --> 00:08:58,100 All right so that's a much better way of doing it. 117 00:08:58,090 --> 00:09:01,680 And if we save We'll get the same the same result. 118 00:09:01,690 --> 00:09:01,950 All right. 119 00:09:01,960 --> 00:09:09,020 So that is get LMM by D That's first selector the next one I want to show you is queries selector. 120 00:09:09,040 --> 00:09:09,400 All right. 121 00:09:09,400 --> 00:09:16,930 So document Daut queries selector which is newer and much more powerful. 122 00:09:17,050 --> 00:09:25,060 Now it's much more powerful because we don't have to select things by ID we can select them by anything. 123 00:09:25,060 --> 00:09:31,300 This is basically it basically works like Jake where you can put any CSSA selector in here. 124 00:09:31,330 --> 00:09:31,690 All right. 125 00:09:31,690 --> 00:09:40,390 So let's go ahead and do console dot log and let's say document Daut queries selector 126 00:09:44,140 --> 00:09:48,700 selector and we can get something by its ID. 127 00:09:48,700 --> 00:09:55,420 So we would just put a hash in there just like we would with a query and we'll say task title and save 128 00:09:55,420 --> 00:10:00,010 and see if we can get that each 5 by its ID. 129 00:10:00,010 --> 00:10:00,390 All right. 130 00:10:00,400 --> 00:10:09,070 Now we can also get things by class so let's say we want the class of card title we would put a dot 131 00:10:09,070 --> 00:10:15,750 in there just like we would query NCSA us and we get the span with the class of card title. 132 00:10:15,790 --> 00:10:16,150 All right. 133 00:10:16,150 --> 00:10:22,160 We can also just use the selector itself or the element itself. 134 00:10:22,160 --> 00:10:31,220 So with so we wanted to get where we wanted to get the H5 we could simply put in age 5 and save and 135 00:10:31,220 --> 00:10:33,020 you see that it gets the H5. 136 00:10:33,020 --> 00:10:37,900 Now if there's more than one H5 on the page it's just going to get the first one. 137 00:10:38,330 --> 00:10:40,130 OK. 138 00:10:41,000 --> 00:10:46,490 Actually I'm going to give you an example of how we can target certain elements even if there's more 139 00:10:46,490 --> 00:10:47,480 than one. 140 00:10:47,480 --> 00:10:59,130 So let's let's work with these lists items now OK so let's do document dot queries selector and let's 141 00:10:59,130 --> 00:10:59,770 grab. 142 00:10:59,790 --> 00:11:08,480 We'll just put an ally here and we're going to say Dot style dot color equals red. 143 00:11:08,730 --> 00:11:11,430 All right so what do you think's going to happen here. 144 00:11:11,490 --> 00:11:13,470 Let's go ahead and save and find out. 145 00:11:13,470 --> 00:11:18,780 Now you may have thought that all of the Allies would turn red but like I said it's only going to be 146 00:11:19,030 --> 00:11:23,320 it's a single element selector it's only going to get the first one. 147 00:11:23,360 --> 00:11:23,720 All right. 148 00:11:23,730 --> 00:11:25,960 And this is the first one here. 149 00:11:25,970 --> 00:11:26,420 All right. 150 00:11:26,430 --> 00:11:32,880 And another thing I should mention is that you can do subclasses are nested nested elements so you can 151 00:11:32,880 --> 00:11:38,190 do like UL ally like that and make it glow. 152 00:11:38,400 --> 00:11:40,110 So you could do that as well. 153 00:11:40,110 --> 00:11:40,540 All right. 154 00:11:40,540 --> 00:11:51,570 Now if I wanted to select let's say the last item here what I could do is I could use CSSA pseudo classes 155 00:11:51,570 --> 00:11:53,520 so we could use last child. 156 00:11:53,520 --> 00:12:01,170 We could put a call in here and say last Dasch child and save and now you can see that the last child 157 00:12:01,170 --> 00:12:02,300 is read. 158 00:12:02,430 --> 00:12:02,810 All right. 159 00:12:02,820 --> 00:12:08,720 Now if you want to specify a certain one like let's say we want the third one here to be yellow. 160 00:12:09,060 --> 00:12:13,290 What we could do is we could specify and child 161 00:12:16,390 --> 00:12:22,480 I realize some of you may not know about this and you may not know CSSA theory but we have pseudo classes 162 00:12:22,480 --> 00:12:31,600 like this and we can say and child 3 and let's add that to yellow and save and I can see the third one 163 00:12:31,600 --> 00:12:32,980 is yellow. 164 00:12:33,070 --> 00:12:33,360 All right. 165 00:12:33,370 --> 00:12:37,550 Now we can also change you know teks content if we want. 166 00:12:37,570 --> 00:12:48,370 So go ahead and let's do the child four and instead of changing the style we'll say text content and 167 00:12:48,370 --> 00:12:51,930 we'll change that to Hello World and save. 168 00:12:51,920 --> 00:12:55,090 And I can see that the text is changed here. 169 00:12:55,090 --> 00:13:01,840 Now for those of you that know about and child about CSSA three you know that you can do odd or even 170 00:13:01,840 --> 00:13:10,050 as well which is used to do like every odd list item or every odd or even div or something like that. 171 00:13:10,060 --> 00:13:15,340 Now I just want to show you what happens if we try to use that with queery selector. 172 00:13:15,340 --> 00:13:20,530 So let's change this for two odd and let's change this. 173 00:13:20,560 --> 00:13:26,480 We want to text content let's do style Daut background. 174 00:13:26,500 --> 00:13:33,960 And we're going to set that to a gray color so it's two hexadecimal value triple C. 175 00:13:34,090 --> 00:13:38,600 Now notice that only the first OD has been affected. 176 00:13:38,650 --> 00:13:45,380 OK it's not going to do every odd because this is a single a single element selector. 177 00:13:45,400 --> 00:13:45,820 All right. 178 00:13:45,820 --> 00:13:47,920 Same thing if we were to do even 179 00:13:50,610 --> 00:13:56,180 so if we change that it even changes to a lighter grey and save. 180 00:13:56,180 --> 00:13:58,330 You see it'll only do the first even. 181 00:13:58,590 --> 00:14:05,460 Now if we use the query selector all method which we're going to look at in the next video I'll show 182 00:14:05,460 --> 00:14:10,460 you how we can actually make it so that every even or every odd we can style. 183 00:14:10,680 --> 00:14:12,760 All right so that's what we're going to get into next.