1 00:00:00,600 --> 00:00:05,160 All right guys now that you know all of the dorm selectors now we're going to do is going to show you 2 00:00:05,160 --> 00:00:10,180 how to traverse the dorm and what would traverse means basically move up and down. 3 00:00:10,350 --> 00:00:17,640 So we're going to be dealing with parents in Children of specific nodes or whatever whatever it is that 4 00:00:17,640 --> 00:00:18,960 we select. 5 00:00:18,960 --> 00:00:24,900 All right so I'm going to go ahead and just declare a variable called Vau just like we've been doing. 6 00:00:25,110 --> 00:00:31,170 And then just cancel dot log at the bottom of the page so that we don't have to keep writing console 7 00:00:31,170 --> 00:00:31,840 log. 8 00:00:32,040 --> 00:00:34,640 All right we'll just set different things to Val. 9 00:00:34,740 --> 00:00:40,140 Now I'm going to set to Constance K. The first is going to be I'm going to call it list and it's going 10 00:00:40,140 --> 00:00:41,270 to be the UL. 11 00:00:41,310 --> 00:00:50,780 OK so the UL that wraps these lists items and we'll get it with document dot queries selector not query 12 00:00:50,780 --> 00:00:55,370 select are all just plain query selector and you could just put you Allen here. 13 00:00:55,370 --> 00:00:58,210 I'm just going to do you all dot collection. 14 00:00:58,290 --> 00:00:59,010 OK. 15 00:00:59,430 --> 00:01:07,770 And then I'm also going to create a variable called list item and I'm going to use document dot query 16 00:01:07,770 --> 00:01:10,200 selector for that as well. 17 00:01:11,010 --> 00:01:17,640 And we're going to select the ally with the class of collection item. 18 00:01:17,640 --> 00:01:22,680 Now there's more than one of these all of these have the class of collection item. 19 00:01:22,930 --> 00:01:25,740 What this is going to do is it's going to select the first one. 20 00:01:25,940 --> 00:01:26,300 OK. 21 00:01:26,310 --> 00:01:35,480 So it's going to like this one actually you know what I'll do is just put in first child here like that. 22 00:01:35,700 --> 00:01:36,120 All right. 23 00:01:36,140 --> 00:01:38,540 And then just to check it out. 24 00:01:38,850 --> 00:01:47,540 I want to make sure save equals list item and want to make sure that that's actually being selected. 25 00:01:47,540 --> 00:01:49,120 So what should be the first one. 26 00:01:49,280 --> 00:01:52,350 So if I hover over that you can see it's the first one. 27 00:01:52,370 --> 00:01:52,660 All right. 28 00:01:52,660 --> 00:01:55,970 And if we were to log I list. 29 00:01:56,820 --> 00:02:01,250 Let's go right here and say Val equals list and save. 30 00:02:01,250 --> 00:02:02,620 And we get the owl. 31 00:02:02,750 --> 00:02:03,490 All right. 32 00:02:03,860 --> 00:02:14,630 So what we're going to look at are different properties that are attached to these items or these nodes. 33 00:02:14,660 --> 00:02:20,330 And they have to do with getting children and parents of these notes so we're going to start off with 34 00:02:20,330 --> 00:02:24,330 the list the list which is the UL. 35 00:02:24,350 --> 00:02:24,740 All right. 36 00:02:24,740 --> 00:02:31,520 So let's say that we want to get the children or the child nodes of the euro so they get 37 00:02:33,980 --> 00:02:42,650 child nodes so we'll set to thou list Daut child knows. 38 00:02:42,650 --> 00:02:44,820 So let's see what that gives us. 39 00:02:44,820 --> 00:02:51,680 So what this gives us is an age Tamal collection I'm sorry on small collection of node list of all the 40 00:02:51,690 --> 00:02:53,960 know all the child nodes. 41 00:02:53,970 --> 00:02:59,880 Now notice that not only do we have the allies that's probably what you were expecting if you have no 42 00:02:59,880 --> 00:03:04,380 experience with this but we also have these text nodes. 43 00:03:04,410 --> 00:03:04,860 All right. 44 00:03:04,860 --> 00:03:08,730 Now these text nodes are actually just the line breaks. 45 00:03:08,880 --> 00:03:14,940 So if we look at our aged female hair we're looking at the children of this UL which are all these allies. 46 00:03:15,240 --> 00:03:15,560 All right. 47 00:03:15,570 --> 00:03:22,080 Now since there's a line break right here this ally is on the next line this actually counts as a text 48 00:03:22,080 --> 00:03:22,620 node. 49 00:03:22,890 --> 00:03:30,300 So you can see there's 11 total If I were to go ahead and get rid of that stat line break right there 50 00:03:30,570 --> 00:03:33,360 and save now there's 10. 51 00:03:33,360 --> 00:03:38,360 If I were to do it on this one here save now there's nine. 52 00:03:38,540 --> 00:03:42,800 And if I were to do it to all of them all of the text nodes would disappear. 53 00:03:43,260 --> 00:03:43,800 All right. 54 00:03:43,830 --> 00:03:49,550 So this is this can be a little confusing at first. 55 00:03:49,590 --> 00:03:58,560 Now in most cases you're not going to want to care about the text nodes you're going to want the elements 56 00:03:58,560 --> 00:04:00,240 the child elements. 57 00:04:00,240 --> 00:04:04,070 So for that we have a property called children. 58 00:04:04,140 --> 00:04:06,810 Instead of using child nodes we can use children. 59 00:04:06,810 --> 00:04:08,910 So let's do that say get 60 00:04:11,280 --> 00:04:12,240 children 61 00:04:14,630 --> 00:04:16,090 element nodes. 62 00:04:16,460 --> 00:04:23,850 OK so say thou equals list Daut children and save. 63 00:04:23,850 --> 00:04:29,670 And now you see we have five and this is actually an age email collection this is not a node list. 64 00:04:29,670 --> 00:04:32,900 So child nodes returns a node list. 65 00:04:32,910 --> 00:04:36,100 Children returns it aged him all collection. 66 00:04:36,120 --> 00:04:36,510 All right. 67 00:04:36,510 --> 00:04:40,460 Notice there's no text it's just it's just the elements. 68 00:04:40,470 --> 00:04:42,940 Now I want to show you something I'm going to just comment. 69 00:04:42,990 --> 00:04:53,030 So first second and then we're going to say thou equals list of child nodes and let's get the first 70 00:04:53,040 --> 00:04:53,340 one. 71 00:04:53,340 --> 00:04:58,100 So I'll say 0 and see what that gives us so that gives us the text node. 72 00:04:58,320 --> 00:04:59,760 All right. 73 00:04:59,850 --> 00:05:03,880 Now we can get the node name as well. 74 00:05:03,930 --> 00:05:18,280 So if I were to say child node 0 dot name and save our name no name and save we'll get text. 75 00:05:18,390 --> 00:05:22,290 Now we can also check the node type. 76 00:05:22,320 --> 00:05:29,820 So for that we'll do dot no type and save and we get the number three. 77 00:05:30,090 --> 00:05:30,510 All right. 78 00:05:30,510 --> 00:05:35,060 Now we know that the than the one after the text node is an element. 79 00:05:35,100 --> 00:05:39,200 So I'm going to put in one here and save and we get one. 80 00:05:39,210 --> 00:05:46,260 So these numbers might be confusing So what I'm going to do is I'm going to paste in a section of comments 81 00:05:46,260 --> 00:05:47,430 here. 82 00:05:47,880 --> 00:05:52,020 And these numbers pertain to what type of nodes these are. 83 00:05:52,020 --> 00:05:54,470 All right so an element node gives us 1. 84 00:05:54,630 --> 00:06:00,960 So right now we're looking at the first list item with this one right here so that's an element 0 was 85 00:06:00,960 --> 00:06:01,930 a text node. 86 00:06:01,950 --> 00:06:03,720 So that gave us three. 87 00:06:03,720 --> 00:06:04,110 All right. 88 00:06:04,110 --> 00:06:10,790 Now attribute is two which is deprecated comment is eight. 89 00:06:10,830 --> 00:06:14,170 The document itself is nine and the doctype is 10. 90 00:06:14,370 --> 00:06:23,070 So if we actually put a comment inside of this UL somewhere let's go right here and we'll just say test 91 00:06:25,890 --> 00:06:34,110 and save and then let's go back and let's just look at child nodes and you can see now instead of 11 92 00:06:34,120 --> 00:06:39,680 there's 13 because what happened is it added the comment as a node and you can see it right here. 93 00:06:39,690 --> 00:06:43,960 It also added another text node because we had another line break. 94 00:06:44,160 --> 00:06:46,880 So you can see the comment is three. 95 00:06:46,950 --> 00:06:51,040 So let's check out the node type of 3. 96 00:06:51,210 --> 00:06:56,890 So go ahead and change this to three and save and we get eight. 97 00:06:57,030 --> 00:07:00,420 And as you can see eight is a comment. 98 00:07:00,450 --> 00:07:00,750 All right. 99 00:07:00,750 --> 00:07:06,020 So just know that child nodes gives us all different types of nodes not just elements. 100 00:07:06,060 --> 00:07:12,090 Children is going to give us just the elements which is for the most part what we want when we're doing 101 00:07:12,360 --> 00:07:13,820 when we're working with the dog. 102 00:07:15,390 --> 00:07:21,440 All right at least in my experience you're going to use children more than child knows. 103 00:07:21,510 --> 00:07:26,610 All right so let me just go back and take that comment out. 104 00:07:26,670 --> 00:07:28,410 We're going to continue on here. 105 00:07:28,510 --> 00:07:30,850 We just uncomment this. 106 00:07:31,190 --> 00:07:37,430 So has I showed you before children just gives us the age Tamal collection of all the elements. 107 00:07:37,530 --> 00:07:51,260 Now we can select specific ones so if I want to save our schools list dot children zero and save it'll 108 00:07:51,300 --> 00:07:52,480 give us the first one. 109 00:07:52,480 --> 00:08:00,830 If I do one saved that will give us the second one and so on and we can do things to these as well. 110 00:08:00,830 --> 00:08:10,900 So if I were to take this one and say Daut text content equals hello and save you'll see that the second 111 00:08:10,900 --> 00:08:14,070 one the Texas changed to Hello. 112 00:08:14,950 --> 00:08:15,320 OK. 113 00:08:15,350 --> 00:08:24,560 Now we can also get children of children. 114 00:08:24,810 --> 00:08:30,330 So if we were to say now that's two about equals 115 00:08:32,730 --> 00:08:39,220 children will get Let's see will get three children three. 116 00:08:39,420 --> 00:08:47,380 And then let's do Daut children and see what that gives us gives us an error. 117 00:08:48,450 --> 00:08:50,920 And that's because I don't want that yet. 118 00:08:52,190 --> 00:09:01,380 Children is not to find it's up oh I forgot the list so list children three children. 119 00:09:01,580 --> 00:09:09,830 So what that does is it gives us the children of the fourth one down which is the index of 3 so 0 1 120 00:09:09,830 --> 00:09:10,910 2 3. 121 00:09:11,210 --> 00:09:12,770 And it has a link in it. 122 00:09:12,860 --> 00:09:16,810 OK this distillery is a link and that's what it's giving us. 123 00:09:16,820 --> 00:09:24,350 You can see it gives us the the link actually gives us a collection of the links but there's only one. 124 00:09:24,350 --> 00:09:28,600 So it has an index of 0 if we wanted to access that specific link. 125 00:09:28,670 --> 00:09:30,630 We could say zero like that. 126 00:09:30,890 --> 00:09:33,170 And now we see a tag. 127 00:09:33,170 --> 00:09:33,530 All right. 128 00:09:33,530 --> 00:09:36,870 And we can do what we want with this if we wanted to add ID. 129 00:09:37,070 --> 00:09:49,530 We could go Dot ID goals I say test link and save and you can see that it's added a test link ID. 130 00:09:49,960 --> 00:09:50,430 All right. 131 00:09:50,430 --> 00:09:56,940 So in addition to child nodes in children we also have first child. 132 00:09:56,940 --> 00:09:58,790 Let's go ahead and take a look at that. 133 00:09:58,800 --> 00:10:05,960 So we'll say the list got first child and save and we get text. 134 00:10:06,000 --> 00:10:14,370 Ok so just like with child nodes first child is going to give us the first node whether it's an element 135 00:10:14,400 --> 00:10:17,400 or whether it's not in this case it's text. 136 00:10:17,400 --> 00:10:17,780 All right. 137 00:10:17,790 --> 00:10:20,850 Now again you might not want to deal with text nodes. 138 00:10:20,910 --> 00:10:31,290 So what you could do is you could use list Daut first element child and save and that will give you 139 00:10:31,290 --> 00:10:35,940 the first actual element not not giving you any text nodes. 140 00:10:36,060 --> 00:10:38,110 OK. 141 00:10:38,420 --> 00:10:47,120 So in most cases you're going to use this now just like we have first child and first element child 142 00:10:48,200 --> 00:10:52,040 we have last child in the last element child. 143 00:10:52,040 --> 00:10:53,810 So it's the last 144 00:10:56,610 --> 00:11:01,740 last I'm going to just comment this for a second so we can see what that gives us and that gives us 145 00:11:01,740 --> 00:11:02,920 a text note. 146 00:11:03,010 --> 00:11:03,370 All right. 147 00:11:03,390 --> 00:11:09,610 We look at the last element child that gives us the actual last list item here. 148 00:11:12,320 --> 00:11:15,550 Let's go put some comments in here. 149 00:11:17,940 --> 00:11:18,400 OK. 150 00:11:18,400 --> 00:11:21,970 So those are some other methods or other properties that we have. 151 00:11:21,970 --> 00:11:23,860 We can also get the count. 152 00:11:23,980 --> 00:11:35,080 So if we want to say now equals let's to list that child element count and save and you can see we get 153 00:11:35,110 --> 00:11:40,550 five because we have five children of the UL K five list items. 154 00:11:42,250 --> 00:11:47,340 Now just like we did all of this stuff with children we can do the same with parents. 155 00:11:47,350 --> 00:11:53,800 So what are going to do now is I'm going to use this list item that we created which is this first list 156 00:11:53,800 --> 00:11:57,850 item here and put a comment right here. 157 00:11:57,850 --> 00:12:07,650 I just like to have this stuff commented for you guys you can go back for a reference count child elements. 158 00:12:07,660 --> 00:12:08,820 OK. 159 00:12:09,070 --> 00:12:14,510 So let's go ahead and say Get parent no good. 160 00:12:14,860 --> 00:12:25,780 So we'll take our list item actually will set them all equals list item dot and then we have parent 161 00:12:25,870 --> 00:12:28,310 node. 162 00:12:28,570 --> 00:12:34,590 OK so if we save that we're going to get you well OK because we're talking about this list item right 163 00:12:34,590 --> 00:12:36,920 here its parent is going to be the UL. 164 00:12:37,040 --> 00:12:40,680 Now there is also parent element just like parent node. 165 00:12:41,100 --> 00:12:46,100 But in most cases it's going to be the same exact thing. 166 00:12:46,100 --> 00:12:50,540 All right so again we get you well now you can also get parents of parents. 167 00:12:50,550 --> 00:13:04,170 So if we were to take this and say parent element parent element and save now we get the card act the 168 00:13:04,170 --> 00:13:10,200 div with the class of card action because if we look we're starting off with this list item here the 169 00:13:10,200 --> 00:13:10,920 first one. 170 00:13:10,920 --> 00:13:17,370 It's parent is the UL and then the parent of the UL is going to be this div right here which is card 171 00:13:17,370 --> 00:13:18,530 action. 172 00:13:18,540 --> 00:13:25,340 All right so you can traverse up or down using these these methods are these properties. 173 00:13:25,940 --> 00:13:26,270 OK. 174 00:13:26,280 --> 00:13:36,740 Now just like we have children parents we also have siblings so let's get the next sibling. 175 00:13:36,750 --> 00:13:38,040 So we'll say Val. 176 00:13:38,040 --> 00:13:47,170 He calls we'll take the list item which is the first list item and will say dog next sibling. 177 00:13:47,810 --> 00:13:48,180 All right. 178 00:13:48,180 --> 00:13:56,430 Now if we save that that's going to give us a text node because just like with the child nodes and first 179 00:13:56,430 --> 00:13:58,800 child and last child. 180 00:13:58,800 --> 00:14:02,500 This also deals with other types of nodes not just elements. 181 00:14:02,520 --> 00:14:04,560 So next would be taxed. 182 00:14:04,740 --> 00:14:07,520 Now if we wanted the next element then we could do. 183 00:14:07,530 --> 00:14:14,220 Next element sibling which would be the next list item. 184 00:14:14,520 --> 00:14:16,090 OK which is the second one. 185 00:14:17,490 --> 00:14:22,440 And if we wanted the one after that we could go ahead and do that again and save. 186 00:14:22,440 --> 00:14:23,920 And now we get the third one. 187 00:14:23,970 --> 00:14:31,290 OK so we can move up and down that we could actually do Daut I shall show you that in a second but we 188 00:14:31,290 --> 00:14:33,980 can also get the previous. 189 00:14:34,380 --> 00:14:40,170 So it's just copy all this and we'll say Get previous sibling 190 00:14:43,740 --> 00:14:46,110 and then we also have previous elements 191 00:14:48,790 --> 00:14:51,440 showing this. 192 00:14:51,750 --> 00:14:52,470 All right. 193 00:14:52,470 --> 00:14:57,460 So if we first look at previous Aveling save that gives us a text node. 194 00:14:57,690 --> 00:15:02,940 If we look at previous elements sibling it's going to be now the reason it's now is because we're dealing 195 00:15:02,940 --> 00:15:05,010 with the first list item here. 196 00:15:05,190 --> 00:15:07,530 So there is no previous sibling. 197 00:15:07,880 --> 00:15:08,440 OK. 198 00:15:08,560 --> 00:15:17,250 There is a next because if we can go down but there's no previous now appear comment does so for a second. 199 00:15:17,790 --> 00:15:21,570 So this gives us the third one. 200 00:15:21,630 --> 00:15:29,130 Now I could attach onto this previous sibling or previous element sibling and now it's going to go back 201 00:15:29,130 --> 00:15:30,780 up one to the second. 202 00:15:30,780 --> 00:15:36,140 All right so you can move up and down that's what traversing the door means. 203 00:15:36,620 --> 00:15:36,920 All right. 204 00:15:36,920 --> 00:15:40,010 So hopefully this all makes sense to you guys. 205 00:15:42,040 --> 00:15:44,380 All right so I think that's a good place to stop. 206 00:15:44,380 --> 00:15:48,740 So in the next video we'll continue learning about the document object model.