1 00:00:01,500 --> 00:00:05,580 Welcome back, my friends, to another electric day, we're going to continue working with Adam, are 2 00:00:05,580 --> 00:00:08,130 you going to learn how to traverse the DOM? 3 00:00:08,130 --> 00:00:13,500 You're going to go from one one element to another element you're going to find with the what parent 4 00:00:13,500 --> 00:00:15,270 means, what sibling means what? 5 00:00:15,340 --> 00:00:15,800 I don't know. 6 00:00:15,900 --> 00:00:18,220 Everything we have, we will do a lot of things. 7 00:00:18,220 --> 00:00:19,290 So don't get frustrated. 8 00:00:19,320 --> 00:00:21,030 This lecture is going to be a little bit longer. 9 00:00:21,360 --> 00:00:25,080 But we want to explain as much as possible things as you can. 10 00:00:25,380 --> 00:00:30,420 And yeah, if you learn this, then you will not have problems in future right now. 11 00:00:30,960 --> 00:00:31,890 First things first. 12 00:00:31,890 --> 00:00:33,090 You need to do one thing. 13 00:00:33,090 --> 00:00:34,380 You need to create three. 14 00:00:34,560 --> 00:00:34,860 Yes. 15 00:00:34,860 --> 00:00:39,600 I'm just going to zoom in and I just need to link it here. 16 00:00:39,780 --> 00:00:40,320 That's it. 17 00:00:41,160 --> 00:00:42,470 Done the video. 18 00:00:42,480 --> 00:00:42,900 Do it. 19 00:00:43,170 --> 00:00:43,570 Come on. 20 00:00:43,920 --> 00:00:52,140 So what we're going to do now is actually we I would like to access the entire you out list. 21 00:00:52,290 --> 00:00:54,270 So I just want to access this list. 22 00:00:54,270 --> 00:00:58,980 So if I go inspect here, you can see this you out here to do list. 23 00:00:59,200 --> 00:01:00,050 So how we can do this. 24 00:01:00,300 --> 00:01:04,530 Remember, we did Quarrie Selecter, so I'm going to see you. 25 00:01:06,180 --> 00:01:15,870 You list you can put more meaningful names if you want and put them in here and let's document dot gov 26 00:01:16,170 --> 00:01:18,790 query selector and inside. 27 00:01:18,810 --> 00:01:27,600 So I'm not going to get all of them, but I'm going to say you and Dad come on to do list. 28 00:01:28,980 --> 00:01:31,520 So let's see if I just nail this one down. 29 00:01:31,770 --> 00:01:39,050 Now here, I'm just going to cancel the printing the U.S. list. 30 00:01:40,320 --> 00:01:41,790 So this is what what I'm going to do. 31 00:01:41,790 --> 00:01:43,320 I'm not going to put it comments anymore. 32 00:01:43,320 --> 00:01:44,520 I'm just going to do it like this. 33 00:01:44,780 --> 00:01:46,090 I'm just going to copy this. 34 00:01:46,410 --> 00:01:50,520 And inside I'm going to put it like here, let's save it. 35 00:01:51,660 --> 00:01:52,680 Let's refresh. 36 00:01:53,100 --> 00:01:56,040 Let's go to the console in here is printing the others. 37 00:01:56,040 --> 00:01:57,450 And if I go here. 38 00:01:57,900 --> 00:02:03,000 Yeah, that's what you're going to have write the entire list is there. 39 00:02:03,320 --> 00:02:04,640 So why is this happening, Lewis? 40 00:02:05,220 --> 00:02:05,820 No idea. 41 00:02:06,010 --> 00:02:08,880 Just probably delete something by mistake here. 42 00:02:11,610 --> 00:02:12,450 Yeah, fix it. 43 00:02:12,720 --> 00:02:17,970 Before when I was doing an app 3gs and just kill something here, I just remove this one. 44 00:02:17,970 --> 00:02:19,020 That's why it wasn't working. 45 00:02:19,020 --> 00:02:21,090 Now I do have the entire to do list. 46 00:02:21,090 --> 00:02:22,500 That's not important what I did. 47 00:02:23,020 --> 00:02:33,090 So what we can do here, what we can grab is actually we can achieve the same thing if we did like this, 48 00:02:33,930 --> 00:02:39,710 because I assure you that we can do it with the query selector or so I'm going to show it to you that 49 00:02:39,720 --> 00:02:40,860 it's still possible. 50 00:02:41,370 --> 00:02:45,120 But you need to change this to apply to do list element. 51 00:02:47,970 --> 00:02:53,010 And basically she produce the same result just to refresh. 52 00:02:53,280 --> 00:02:55,890 But he's going to give me a Notley's, but it's actually the same one. 53 00:02:56,130 --> 00:02:57,810 I see all four of them. 54 00:02:58,290 --> 00:02:59,490 That's pretty much it. 55 00:02:59,490 --> 00:02:59,880 We don't. 56 00:03:00,210 --> 00:03:04,140 So I just show you that you can do it with a selector. 57 00:03:04,140 --> 00:03:11,100 But in this case, we need to do it with query, select or not with query, select or select selector 58 00:03:11,100 --> 00:03:12,660 all Jesus. 59 00:03:12,660 --> 00:03:14,130 I can't even pronounce this one. 60 00:03:14,370 --> 00:03:22,320 Now, what we can do is actually we will able to access their children. 61 00:03:22,350 --> 00:03:22,800 Right. 62 00:03:23,070 --> 00:03:24,450 So how we can do this, we can. 63 00:03:24,510 --> 00:03:31,170 There is two ways we can access the children is a Notley's as you see this one was Notley's here. 64 00:03:31,200 --> 00:03:32,160 I haven't refreshed. 65 00:03:32,160 --> 00:03:35,700 That's why it's still there in the Second Way's A.T.M. collection. 66 00:03:35,700 --> 00:03:39,240 You already know this too, but I'm going to do it anyway here. 67 00:03:39,960 --> 00:03:47,340 So I'm going to say var upl list Telemann notes 68 00:03:49,710 --> 00:03:51,570 in here. 69 00:03:52,800 --> 00:04:00,540 So I'm going to say no and I'm going to say I need to pass this one here and to grab the child notes. 70 00:04:02,550 --> 00:04:07,920 It's not child, it's not children, it's a child notes like that. 71 00:04:08,190 --> 00:04:11,160 Now I'm just going to copy this one again. 72 00:04:11,160 --> 00:04:12,630 I'm going to print it out here. 73 00:04:12,900 --> 00:04:18,120 So printing the USO list 74 00:04:20,670 --> 00:04:27,480 with child notes and I need to change this one here, there to look what will happen here. 75 00:04:27,810 --> 00:04:31,530 Now, I'm going to have these notes here and I have text. 76 00:04:31,530 --> 00:04:32,970 I have to do list. 77 00:04:32,970 --> 00:04:34,320 I have text again. 78 00:04:34,740 --> 00:04:42,120 And there are a lot of different notat properties that you're going to see here, but the text is actually 79 00:04:43,350 --> 00:04:44,060 going to show you. 80 00:04:44,280 --> 00:04:51,300 So if I hear just cut this one and put it here attached to the second one. 81 00:04:51,420 --> 00:04:52,500 The first one, actually. 82 00:04:52,740 --> 00:04:56,040 So I hope that this text will disappear. 83 00:04:56,050 --> 00:04:58,290 It will be the list will be right. 84 00:04:58,800 --> 00:04:59,850 Because the space. 85 00:05:00,170 --> 00:05:05,870 Consider it as a tax and stuff like that, so you don't need to worry about all of these things because 86 00:05:05,870 --> 00:05:09,020 I'm going to show you what different no type properties there are. 87 00:05:09,260 --> 00:05:15,190 And we have 12 different types which may have children of various of various types. 88 00:05:15,200 --> 00:05:15,510 Right. 89 00:05:15,530 --> 00:05:17,240 And also they have the returned values. 90 00:05:17,390 --> 00:05:20,660 But you don't need to worry about this because that is not today's lecture. 91 00:05:21,390 --> 00:05:24,740 So this is how you can return to Notley's. 92 00:05:25,100 --> 00:05:34,370 And so let's return only the how to say this is not list. 93 00:05:34,450 --> 00:05:35,540 I'm just going to put it here. 94 00:05:36,530 --> 00:05:37,680 No lists. 95 00:05:37,700 --> 00:05:47,940 And each time a collection is very similar and we will see each HTML collection list and we will see 96 00:05:48,000 --> 00:05:53,480 here saying you list element, any set of notes, I'm going to say children here. 97 00:05:54,830 --> 00:06:01,280 And instead of passing the child notes, we're going to say, children know what this will do? 98 00:06:01,460 --> 00:06:02,520 Just going to copy this one. 99 00:06:02,520 --> 00:06:08,540 So I'm just going to do this letter is going to be too many copying and pasting things like page this 100 00:06:08,540 --> 00:06:17,440 one here and I say, OK, children, this will return me the HTML collection, right? 101 00:06:17,540 --> 00:06:19,430 So I have one zero position. 102 00:06:19,580 --> 00:06:23,120 I have this ally, the second ally, and I have three. 103 00:06:23,120 --> 00:06:25,430 The length is four right now. 104 00:06:25,640 --> 00:06:27,650 What we can do, we can access. 105 00:06:27,650 --> 00:06:33,500 The first and last element of these doesn't have to be this collection. 106 00:06:33,650 --> 00:06:37,820 We can access the first and last element from this list. 107 00:06:38,450 --> 00:06:40,570 See how powerful this is coming through. 108 00:06:40,760 --> 00:06:43,850 So I'm just going to copy it here. 109 00:06:43,860 --> 00:06:52,910 I'm going to say first and last and last child children, OK? 110 00:06:52,910 --> 00:06:53,990 So I'm going to use this one. 111 00:06:54,000 --> 00:07:02,030 You see you list because that holds the entire thing, the entire ALLAI lock right now. 112 00:07:02,030 --> 00:07:03,590 So I'm going to how are we going to do it? 113 00:07:03,770 --> 00:07:11,180 So I'm going to say variable first child and I'm going to put it here, the other list. 114 00:07:11,180 --> 00:07:14,210 And I'm going to say first element child. 115 00:07:14,240 --> 00:07:20,390 No, you can always when I use element you can always use without this element is going to be like this, 116 00:07:20,600 --> 00:07:23,720 but that will return this text here. 117 00:07:24,590 --> 00:07:26,690 So I'm not going to deal with that in this lecture. 118 00:07:26,870 --> 00:07:32,710 So in 99 percent of the cases you need first element child, you need real elements. 119 00:07:32,730 --> 00:07:39,530 I'm just going to cancel my first child. 120 00:07:39,710 --> 00:07:40,640 Oops, this happened. 121 00:07:41,270 --> 00:07:43,160 OK, let's let's see. 122 00:07:43,160 --> 00:07:45,890 The first child will be printed here. 123 00:07:45,950 --> 00:07:47,300 It is the first child. 124 00:07:47,690 --> 00:07:56,000 So we have the first child from the list, but we can also access even the last child of that list. 125 00:07:56,210 --> 00:07:57,250 So how we can do that. 126 00:07:57,770 --> 00:08:00,140 So same as this. 127 00:08:02,090 --> 00:08:07,940 Even I can use the same variable but I'm not I'm just going to say, oh, child, just to have a little 128 00:08:07,940 --> 00:08:08,750 bit differently. 129 00:08:08,990 --> 00:08:14,060 And this will be the last element to child. 130 00:08:14,390 --> 00:08:14,810 Right? 131 00:08:15,650 --> 00:08:18,230 So let's bring this out again. 132 00:08:18,590 --> 00:08:20,270 It put this one variable. 133 00:08:20,570 --> 00:08:25,010 So I expect this element to be returned here after this one. 134 00:08:27,630 --> 00:08:33,060 Yeah, so we have first child of the list in the second child of this list, when I say list, I'm thinking 135 00:08:33,060 --> 00:08:40,410 about you list an order list and the line is actually there, right in the no lists. 136 00:08:40,830 --> 00:08:41,220 No. 137 00:08:44,280 --> 00:08:49,410 So I've just briefly mentioned about Notley's and we haven't done anything with that. 138 00:08:49,710 --> 00:08:57,750 So we can just do a for loop in because the Notley's doesn't only return elements inside, it returns 139 00:08:58,360 --> 00:08:59,270 even this text. 140 00:08:59,550 --> 00:09:03,000 So what we can do, we can do a for loop here. 141 00:09:03,000 --> 00:09:06,540 And I'm going to say, OK, console what? 142 00:09:06,960 --> 00:09:09,120 I just want to show you that what we are going to do. 143 00:09:09,360 --> 00:09:25,710 So printing printing out the element, child node element, child with for loop so we can access a lot 144 00:09:25,710 --> 00:09:26,750 of things here. 145 00:09:26,760 --> 00:09:32,550 That's why you can go to type properties and you can read a lot of things here. 146 00:09:32,970 --> 00:09:40,650 And what I can access a couple of the properties so we can access actually the name and no title. 147 00:09:41,010 --> 00:09:47,340 And so how we can do this, we can use this list here. 148 00:09:48,300 --> 00:09:52,130 I'm going to copy it and I'm going to use it in the for loop, not for data. 149 00:09:52,500 --> 00:09:53,730 I'm going to use it for a loop. 150 00:09:54,030 --> 00:09:56,730 So I'm going to say where I equals zero. 151 00:09:58,890 --> 00:09:59,580 What's happening? 152 00:10:00,600 --> 00:10:06,060 I smaller than the length of this one pi plus. 153 00:10:06,060 --> 00:10:09,730 Plus we need to incriminate in all of this by now. 154 00:10:09,990 --> 00:10:13,560 So inside what we can do, we can come to like two things. 155 00:10:14,340 --> 00:10:17,090 We are mostly concerned to find out. 156 00:10:17,100 --> 00:10:24,390 Sometimes we need to find out, you know, list element nodes ie the note name. 157 00:10:27,570 --> 00:10:33,420 And I'm going to concatenate this with the space and I just want to access this. 158 00:10:34,590 --> 00:10:38,970 I'm just going to copy the entire thing and I will say X is the node type. 159 00:10:39,330 --> 00:10:39,660 Right. 160 00:10:39,930 --> 00:10:41,640 What type we are talking about here. 161 00:10:42,900 --> 00:10:45,210 So I hope it's going to work this one. 162 00:10:46,200 --> 00:10:47,430 And let's refresh it. 163 00:10:47,520 --> 00:10:48,140 Here it is. 164 00:10:48,900 --> 00:10:57,600 So it's going text is going list element number one again, text list element number one, text and 165 00:10:57,610 --> 00:10:58,260 stuff like that. 166 00:10:58,260 --> 00:11:05,430 Oh, if you can see here, we have a lot of things, this node type. 167 00:11:06,120 --> 00:11:08,790 So I'm showing you the numbers first. 168 00:11:08,910 --> 00:11:14,100 I'm showing you the numbers with the node name and no type. 169 00:11:14,100 --> 00:11:18,150 Right, because the text is three here. 170 00:11:18,150 --> 00:11:25,080 If you go three, there is a text represent textual constant content in element or attribute. 171 00:11:25,200 --> 00:11:26,880 Number one is element. 172 00:11:27,060 --> 00:11:30,060 Actually, Elai is the element. 173 00:11:30,060 --> 00:11:31,230 That's why it's number one. 174 00:11:31,500 --> 00:11:33,450 That's why the node that is number one. 175 00:11:33,810 --> 00:11:42,840 But what we can do is also if we add let's see first let's show you the number eight is a comma, represent 176 00:11:42,840 --> 00:11:43,200 a comment. 177 00:11:43,210 --> 00:11:49,620 So if we put somewhere somewhere in our ally here, I'm just going to put it in the middle. 178 00:11:49,620 --> 00:11:52,050 So I'm just going to create an HTML element. 179 00:11:52,860 --> 00:12:02,610 This is a common now, this comment, I expect it to be in this note list and it should be ten here. 180 00:12:03,780 --> 00:12:05,130 Actually, it comes to eleven. 181 00:12:05,370 --> 00:12:09,840 But here is the common is there is a number in the note. 182 00:12:09,840 --> 00:12:11,730 I mean, the node type is giving. 183 00:12:11,730 --> 00:12:12,660 You mean number eight. 184 00:12:13,050 --> 00:12:17,970 So, yeah, you should go through all this when you have chance. 185 00:12:18,210 --> 00:12:22,470 But don't worry about it because we're going to do it like when we have. 186 00:12:22,620 --> 00:12:24,210 So no name returns this one. 187 00:12:24,210 --> 00:12:27,480 So we are using this one and note that we're using that one. 188 00:12:27,780 --> 00:12:29,160 So don't worry about it. 189 00:12:29,160 --> 00:12:36,180 But just I just want to show you how we can access things from the noplace now we have done with this. 190 00:12:36,690 --> 00:12:47,340 And what I want to do is also to print the parent node from this list, this list. 191 00:12:47,340 --> 00:12:51,630 I just want you to print the you list element parent node. 192 00:12:51,810 --> 00:12:54,420 OK, now that's another concern for us. 193 00:12:54,690 --> 00:13:03,420 So parent notes that we have parent nodes and parent elements and they are just going to return the 194 00:13:03,420 --> 00:13:04,110 same thing. 195 00:13:04,380 --> 00:13:06,450 We can get a lot of things. 196 00:13:06,450 --> 00:13:08,010 We can get the parent of the parent. 197 00:13:08,010 --> 00:13:15,970 You will see in the minute what we're trying to say because here this you will list it. 198 00:13:16,030 --> 00:13:17,430 Spearin is actually. 199 00:13:17,430 --> 00:13:21,840 So if I minimize it here it Spearin is this list wrapper. 200 00:13:21,960 --> 00:13:22,410 Right. 201 00:13:23,100 --> 00:13:26,880 But the parent of this list repr if I just make it like this. 202 00:13:27,170 --> 00:13:30,590 The parent, it's not actually this one because this one is ending here. 203 00:13:31,010 --> 00:13:37,190 I don't want to confuse you, but the parent is this card body in the parent of this card body is actually 204 00:13:37,190 --> 00:13:37,760 the card. 205 00:13:38,150 --> 00:13:38,520 Right. 206 00:13:38,540 --> 00:13:42,500 So he here is how this treats work right now. 207 00:13:43,190 --> 00:13:46,280 Let's find the parent of this other list. 208 00:13:46,490 --> 00:13:52,040 And we have the U.S. list where we have this to do list in our. 209 00:13:52,100 --> 00:13:58,940 I'm just going to say that here in our list element right now, what we can do, I'm just going to say 210 00:13:59,120 --> 00:14:13,310 there's a lot there's the parent note and actually, let's put it printing the parent note, 211 00:14:16,900 --> 00:14:17,370 note. 212 00:14:18,440 --> 00:14:21,900 You have a list and let's see what's happening. 213 00:14:23,060 --> 00:14:28,280 So the parent knows I told you they're at least Tarapur right now. 214 00:14:28,280 --> 00:14:34,170 We can access the parent element, but that will give you the same thing, right? 215 00:14:34,250 --> 00:14:35,960 It we'll give you pretty much the same thing. 216 00:14:35,960 --> 00:14:43,220 I expect parent element and let's see what's happening here. 217 00:14:43,560 --> 00:14:47,120 Here is he's giving you the same thing so you can ignore that. 218 00:14:47,280 --> 00:14:47,900 So parent. 219 00:14:47,900 --> 00:14:52,940 No, but as I told you, we can get the parent of the parent, right. 220 00:14:54,590 --> 00:15:02,150 Bringing the parent of what was the name, strapper. 221 00:15:08,330 --> 00:15:08,720 Come on. 222 00:15:12,700 --> 00:15:13,470 What else? 223 00:15:13,870 --> 00:15:17,200 So, yeah, I mean, we're going to print that one here so we can take a look. 224 00:15:18,310 --> 00:15:19,870 So how are we going to print what you think? 225 00:15:20,120 --> 00:15:27,460 So we're going to put a dot and we're going to say again, parent note and let's hope it will give me, 226 00:15:27,460 --> 00:15:28,830 as I told you. 227 00:15:28,830 --> 00:15:29,970 So I'm just flicking around. 228 00:15:30,340 --> 00:15:37,060 So from this list wrapper, the parent is this card body. 229 00:15:37,550 --> 00:15:39,670 Let's refresh here. 230 00:15:39,670 --> 00:15:41,140 It is hardbody. 231 00:15:41,140 --> 00:15:46,450 So see, when I cover it, it's select lot of things, at least wrappers like the wrapper from the list, 232 00:15:46,600 --> 00:15:48,820 an order list and this one for the card body. 233 00:15:48,970 --> 00:15:49,840 How cool is this? 234 00:15:49,960 --> 00:15:56,530 We can go one step further and that will should give us the card right here. 235 00:15:56,770 --> 00:15:58,210 I'm just going to copy the entire thing. 236 00:16:01,680 --> 00:16:12,420 Cark body, and we can go to one more thing, and that should eventually give us the car, the entire 237 00:16:12,420 --> 00:16:13,740 car, nice. 238 00:16:14,430 --> 00:16:16,000 So we know how to do this. 239 00:16:16,020 --> 00:16:18,210 Now we know how to access the parents of them. 240 00:16:18,360 --> 00:16:19,920 So see how we can traverse. 241 00:16:19,930 --> 00:16:22,740 We can get the last first child, last child. 242 00:16:22,950 --> 00:16:25,020 We can get the entire Notley's. 243 00:16:25,200 --> 00:16:26,970 We can print the entire Notley's. 244 00:16:26,970 --> 00:16:29,010 We can just find different note types. 245 00:16:29,010 --> 00:16:30,510 What we have in our document. 246 00:16:30,810 --> 00:16:32,340 We can do a lot of things, my friend. 247 00:16:32,350 --> 00:16:33,350 So don't get frustrated. 248 00:16:33,360 --> 00:16:34,590 We have a couple of things to do. 249 00:16:34,590 --> 00:16:34,910 Right. 250 00:16:35,490 --> 00:16:37,130 So, yeah. 251 00:16:37,140 --> 00:16:41,010 So how we can get siblings right. 252 00:16:41,010 --> 00:16:43,350 In our case, we do have siblings here. 253 00:16:43,350 --> 00:16:49,380 Siblings means this next sibling or the first line is this one. 254 00:16:49,380 --> 00:16:49,680 Right. 255 00:16:49,800 --> 00:16:51,360 And next sibling is this one. 256 00:16:51,360 --> 00:16:54,750 The previous sibling means one one step above. 257 00:16:54,750 --> 00:16:57,930 But the previous sibling of this one, it can go up here. 258 00:16:57,930 --> 00:16:58,250 Right. 259 00:16:58,260 --> 00:17:02,760 There is nothing else it's going to return on and identify or know. 260 00:17:03,540 --> 00:17:05,730 So I'm not sure what's going to return, but should be. 261 00:17:05,730 --> 00:17:10,290 No, OK, no, I'm just going to say console here. 262 00:17:12,060 --> 00:17:17,040 I hope you like this the way I'm doing this with a lot, because you will be able to see it. 263 00:17:17,370 --> 00:17:18,480 Um, yeah. 264 00:17:18,480 --> 00:17:22,950 What we are doing here, instead of just bringing out or commenting everything, I don't want to comment 265 00:17:23,070 --> 00:17:23,670 nothing. 266 00:17:24,270 --> 00:17:25,710 So printing 267 00:17:28,350 --> 00:17:33,510 the preview and next sibling. 268 00:17:35,220 --> 00:17:35,670 Right. 269 00:17:35,850 --> 00:17:36,840 So what are we going to do? 270 00:17:37,260 --> 00:17:47,580 I'm going to say we're fine siblings and I'm going to say, OK, document what did I type thought query 271 00:17:47,580 --> 00:17:48,240 selector. 272 00:17:48,480 --> 00:17:58,680 And we will say, OK, I just want to query selector that ally there we to do list element. 273 00:18:00,480 --> 00:18:03,330 No, let's test out this real quick. 274 00:18:03,900 --> 00:18:08,010 I'm just going to delete data that comes with that like five siblings. 275 00:18:09,180 --> 00:18:11,880 So let's see if I can be able to pull out something. 276 00:18:11,880 --> 00:18:13,970 Here it is. 277 00:18:15,390 --> 00:18:20,010 So we just pull out the first one, this kind of return only one right now. 278 00:18:20,640 --> 00:18:24,030 We don't need this, but actually we do need this. 279 00:18:24,330 --> 00:18:28,050 So I'm just going to see the next element. 280 00:18:28,050 --> 00:18:30,330 Sibling, how cool is this? 281 00:18:30,340 --> 00:18:31,200 Let's check it out. 282 00:18:31,680 --> 00:18:33,900 So this should give me the second one. 283 00:18:34,140 --> 00:18:35,630 So if I hover, here it is. 284 00:18:36,000 --> 00:18:38,280 So as I told you, you can go next. 285 00:18:38,280 --> 00:18:39,000 Next, next. 286 00:18:41,180 --> 00:18:48,050 In the next 11 sibling, you can go without this Elliman sibling, but it will return something else. 287 00:18:48,320 --> 00:18:49,290 It will return. 288 00:18:49,310 --> 00:18:50,660 No, it's not interesting, right. 289 00:18:50,840 --> 00:18:54,680 So we are in the position number three right now. 290 00:18:54,740 --> 00:18:57,110 What we can do, we can use the same one 291 00:18:59,960 --> 00:19:07,900 with the previous five previous sibling. 292 00:19:09,320 --> 00:19:13,700 Let's put it through this elementary link in this one. 293 00:19:13,730 --> 00:19:16,390 It can get me in trouble. 294 00:19:16,400 --> 00:19:21,320 It's because not because we are just finding the first one, because these fine siblings. 295 00:19:21,620 --> 00:19:21,980 Right. 296 00:19:22,400 --> 00:19:26,300 Don't don't confuse with this one because we are going down to the tree. 297 00:19:26,600 --> 00:19:29,620 But this one is actually holding the first elements. 298 00:19:29,630 --> 00:19:30,550 It's not holding this one. 299 00:19:30,770 --> 00:19:32,560 We can create a variable here. 300 00:19:33,170 --> 00:19:35,750 So if you want to find the previous sibling. 301 00:19:36,620 --> 00:19:39,980 OK, so let's do it like this variable. 302 00:19:40,970 --> 00:19:47,720 Find sibling of two, for example. 303 00:19:49,340 --> 00:19:49,540 Oops. 304 00:19:49,760 --> 00:19:53,240 What happened of the two sibling. 305 00:19:53,240 --> 00:19:54,610 Fine sibling. 306 00:19:55,460 --> 00:19:56,990 Yeah, it's not working here. 307 00:19:57,260 --> 00:19:58,700 OK, fine sibling of the two. 308 00:19:58,820 --> 00:19:59,840 You know what I'm going to do. 309 00:19:59,990 --> 00:20:03,860 I'm just going to put it here and I'm going to refresh. 310 00:20:03,860 --> 00:20:04,880 Nothing should change. 311 00:20:04,880 --> 00:20:05,870 He's going to steal now. 312 00:20:06,110 --> 00:20:13,880 But this if I just change a previous element sibling I should because this is the number two. 313 00:20:13,880 --> 00:20:19,400 Let's refresh one and I should have this one because the previous element was number three. 314 00:20:19,940 --> 00:20:23,150 So when I say to actually I mean zero one two. 315 00:20:23,150 --> 00:20:23,480 Right. 316 00:20:23,780 --> 00:20:25,670 In the previous element is this one. 317 00:20:25,880 --> 00:20:26,780 How cool is this? 318 00:20:26,810 --> 00:20:27,130 Right. 319 00:20:27,410 --> 00:20:33,380 Otherwise, it will return you now because we are grabbing the first element of our I hope you understand 320 00:20:33,380 --> 00:20:34,160 what I did here. 321 00:20:34,400 --> 00:20:38,600 So if you have, you can just go previous element. 322 00:20:38,600 --> 00:20:43,280 As I told you, this element everywhere can be deleted. 323 00:20:43,280 --> 00:20:48,710 And it was not that one is going to return text. 324 00:20:48,710 --> 00:20:49,030 Right. 325 00:20:49,190 --> 00:20:50,300 Same as the noblest. 326 00:20:50,690 --> 00:20:54,800 So I'm not going to bother explaining you there because it's not interesting. 327 00:20:55,070 --> 00:20:59,120 And yet we have a couple of more things to do. 328 00:20:59,870 --> 00:21:05,680 So what if we want to access the children? 329 00:21:05,750 --> 00:21:06,800 Let me just show you. 330 00:21:07,820 --> 00:21:11,450 So I'm going to go to the inspector here and I'm going to expect this ally. 331 00:21:11,660 --> 00:21:18,530 So in this ally to do list element, I do have spane inside that holds the stakes here. 332 00:21:19,190 --> 00:21:22,400 In the next element that it's inside is this trash. 333 00:21:22,410 --> 00:21:23,600 It's atrip leak. 334 00:21:23,960 --> 00:21:30,380 So I have students that sometimes ask me, but what, what how we can access because I never explained 335 00:21:30,380 --> 00:21:31,190 them one on one. 336 00:21:31,430 --> 00:21:33,280 I have classes sometimes one to one. 337 00:21:33,280 --> 00:21:39,620 And and they have problems because say here they don't understand the concept, how we can get these 338 00:21:39,620 --> 00:21:40,100 elements. 339 00:21:40,280 --> 00:21:44,120 But I'm going to show you in this one, because it's going to be a good cause. 340 00:21:44,510 --> 00:21:48,980 And I just want to have as much as things explained as possible. 341 00:21:49,250 --> 00:22:03,560 So I'm going to say, OK, fine, the children of Elai that are are spane in each breath link. 342 00:22:03,920 --> 00:22:04,730 How cool is this? 343 00:22:05,750 --> 00:22:09,020 Now, I'm just going to use the same collection here. 344 00:22:11,660 --> 00:22:19,470 So it's not going to be sibling, I'm going to say ally collection, and it's going to be the same thing. 345 00:22:19,690 --> 00:22:23,350 No, I'm just going to love the collection in order to see it. 346 00:22:23,360 --> 00:22:26,590 Council La Hilli collection. 347 00:22:27,980 --> 00:22:30,980 And that should return me in the council. 348 00:22:32,360 --> 00:22:37,250 This one the first element, because with me we are finding we're not getting all we just finding the 349 00:22:37,250 --> 00:22:38,110 first element. 350 00:22:38,120 --> 00:22:47,960 Now what we can do here, I just want to access and I did a show you like this, you can't actually 351 00:22:47,960 --> 00:22:55,900 see it here, but I just want to access this one, the spin and the elai. 352 00:22:56,240 --> 00:22:57,920 So how we can do this. 353 00:22:58,160 --> 00:23:00,380 OK, first we're going to find the children, 354 00:23:03,500 --> 00:23:07,130 the children, and let's see what's happened. 355 00:23:07,130 --> 00:23:10,780 It's going to return me on HTML collection, right. 356 00:23:10,790 --> 00:23:11,960 With two elements. 357 00:23:12,200 --> 00:23:13,130 How cool is this? 358 00:23:13,130 --> 00:23:15,710 Now I do have this one on one zero position. 359 00:23:15,830 --> 00:23:18,350 You have the span on first position. 360 00:23:18,350 --> 00:23:19,760 I do have this eight traveling. 361 00:23:19,910 --> 00:23:21,680 So now it's easy from now on. 362 00:23:21,680 --> 00:23:25,310 So what I can do is I'm going to I can create a variable here, guys. 363 00:23:25,490 --> 00:23:27,470 Siwa Ayling. 364 00:23:27,470 --> 00:23:40,070 No, let's put Hispan here and I'm going to say Elai children and I can get it like this zero and I 365 00:23:40,070 --> 00:23:42,740 hope the other one link. 366 00:23:45,560 --> 00:23:48,050 Link was on the first position, right? 367 00:23:49,160 --> 00:24:00,470 So what we can do, we can cons a lot of them now comes a lot can say here span child. 368 00:24:01,490 --> 00:24:03,380 And I'm going to cons a lot again. 369 00:24:04,340 --> 00:24:06,170 And I'm going to copy this one here. 370 00:24:06,170 --> 00:24:09,050 I'm going to put it here and I'm going to do it in one go. 371 00:24:09,470 --> 00:24:13,700 I'm going to number one or zero. 372 00:24:13,710 --> 00:24:16,250 I'm going to put it like this is number one. 373 00:24:16,250 --> 00:24:21,650 It will be the H ref child right in here. 374 00:24:21,650 --> 00:24:23,850 We need to pass in the link, right. 375 00:24:23,900 --> 00:24:24,880 Because we store them. 376 00:24:25,970 --> 00:24:28,460 Now, I'm just going to refresh you. 377 00:24:28,480 --> 00:24:32,530 It is I do have this E class and I do have this span. 378 00:24:32,810 --> 00:24:33,830 How cool is it? 379 00:24:33,830 --> 00:24:39,500 So when I hover so I can access pretty much anything that I want and actually I can change things, 380 00:24:39,500 --> 00:24:50,810 I can create I can get different text here for this span or let's let's do something interesting. 381 00:24:51,200 --> 00:24:54,050 We can just add here. 382 00:24:54,720 --> 00:24:56,120 Let's, let's do before. 383 00:24:56,120 --> 00:24:57,590 I mean we can do it after. 384 00:24:59,250 --> 00:25:00,350 I'm just going to add. 385 00:25:03,340 --> 00:25:05,920 Iggy to each link. 386 00:25:06,370 --> 00:25:18,920 So how we can do this, so I'm going to see this one, so it's in the link and we can see I.D. equals 387 00:25:20,140 --> 00:25:20,470 Heidi. 388 00:25:22,230 --> 00:25:33,250 And let's hope if I refresh a spirit, is there OK, let's just inspected here in it. 389 00:25:33,250 --> 00:25:34,920 It is the Spaniard's there, right? 390 00:25:35,030 --> 00:25:37,690 Spread to the tracks, to the traveling. 391 00:25:37,690 --> 00:25:40,840 You can do the same thing for for the Spanish if you want. 392 00:25:40,850 --> 00:25:41,140 Right. 393 00:25:41,410 --> 00:25:43,280 So it shouldn't be Spanish. 394 00:25:43,290 --> 00:25:46,050 It should be trash, Heidi. 395 00:25:46,130 --> 00:25:46,480 Right. 396 00:25:46,950 --> 00:25:50,710 I'm just going to refresh now and I'm going to inspect it here. 397 00:25:51,790 --> 00:25:53,950 I'm going to say, OK, FFA. 398 00:25:54,340 --> 00:25:54,610 Yeah. 399 00:25:54,610 --> 00:25:56,440 Here this trash Heidi. 400 00:25:56,710 --> 00:25:57,510 How cool is this. 401 00:25:57,670 --> 00:25:58,930 Now you can change the color. 402 00:25:58,930 --> 00:26:00,150 You can change whatever you want. 403 00:26:00,690 --> 00:26:00,780 You. 404 00:26:01,060 --> 00:26:02,520 So you know how to traverse. 405 00:26:02,750 --> 00:26:08,920 You know how to get the parents to get the parents of their parents to get the siblings first and last 406 00:26:08,920 --> 00:26:09,910 child from the list. 407 00:26:10,210 --> 00:26:11,080 You know what? 408 00:26:11,080 --> 00:26:13,450 They're different types and what they mean. 409 00:26:13,540 --> 00:26:17,760 You can just Google it and actually just give it to this address. 410 00:26:17,770 --> 00:26:20,650 I'm not going to give it in the in the documentation. 411 00:26:20,650 --> 00:26:27,250 But remember, w w w we three schools that come and just type here know times. 412 00:26:27,430 --> 00:26:28,340 That's pretty much it. 413 00:26:28,900 --> 00:26:29,800 So thank you very much. 414 00:26:29,800 --> 00:26:31,780 I hope you enjoyed this one. 415 00:26:31,790 --> 00:26:33,790 You know how to traverse this one. 416 00:26:33,970 --> 00:26:38,850 You know how to get the parent of their parent, the children, how to get the first last child and 417 00:26:38,860 --> 00:26:39,670 yeah, a lot of things. 418 00:26:39,680 --> 00:26:42,850 So thank you very much and we'll see you in the next one. 419 00:26:42,850 --> 00:26:47,800 So if you haven't watched the previous one, just go watch the previous one, because this will you 420 00:26:47,800 --> 00:26:49,930 will not understand if you don't want to previous one. 421 00:26:50,110 --> 00:26:51,220 So thank you very much. 422 00:26:51,610 --> 00:26:56,110 Like subscribe put a good common five star review wherever you want. 423 00:26:56,110 --> 00:26:57,080 So thank you very much. 424 00:26:57,130 --> 00:26:58,030 See you in the next time.