1 00:00:01,300 --> 00:00:02,160 This lecture 2 00:00:02,160 --> 00:00:05,290 is gonna be about Traversing the Dom. 3 00:00:05,290 --> 00:00:09,420 So Dom traversing is basically walking through the Dom. 4 00:00:09,420 --> 00:00:12,180 Which means that we can select an element 5 00:00:12,180 --> 00:00:14,620 based on another element. 6 00:00:14,620 --> 00:00:16,590 And this is very important 7 00:00:16,590 --> 00:00:19,210 because sometimes we need to select elements 8 00:00:19,210 --> 00:00:22,430 relative to a certain other element. 9 00:00:22,430 --> 00:00:26,890 For example, a direct child or a direct parent element. 10 00:00:26,890 --> 00:00:29,800 Or sometimes we don't even know the structure 11 00:00:29,800 --> 00:00:32,040 of the Dom at runtime. 12 00:00:32,040 --> 00:00:35,423 And in all these cases, we need Dom traversing. 13 00:00:37,190 --> 00:00:38,900 And this video is gonna be 14 00:00:38,900 --> 00:00:42,770 another very nice reference lecture for you. 15 00:00:42,770 --> 00:00:46,470 And so let's now work with this h1 element here, 16 00:00:46,470 --> 00:00:48,930 and from here we're gonna go downwards, 17 00:00:48,930 --> 00:00:52,200 upwards and also sideways. 18 00:00:52,200 --> 00:00:54,593 So let's quickly inspect this element. 19 00:00:58,590 --> 00:00:59,980 All right. 20 00:00:59,980 --> 00:01:01,053 So we see, 21 00:01:04,558 --> 00:01:06,610 so here we have the h1 element 22 00:01:06,610 --> 00:01:09,720 and in there we have some text, we have some comments, 23 00:01:09,720 --> 00:01:13,270 then we have the span element, then some more texts 24 00:01:13,270 --> 00:01:15,133 and even more elements. 25 00:01:16,000 --> 00:01:18,550 And so this is gonna be a lot of fun, 26 00:01:18,550 --> 00:01:21,570 exploring a couple of different methods 27 00:01:21,570 --> 00:01:24,823 and properties to walk around this element. 28 00:01:26,350 --> 00:01:27,983 So let's start by selecting it. 29 00:01:32,240 --> 00:01:35,363 Maybe we already did that before somewhere, 30 00:01:36,420 --> 00:01:38,293 but yeah, that doesn't really matter. 31 00:01:40,020 --> 00:01:42,707 So let's start with 'going downwards.' 32 00:01:45,560 --> 00:01:49,363 So basically selecting child elements. 33 00:01:50,270 --> 00:01:52,970 So the first way of doing that is to use querySelector 34 00:01:53,850 --> 00:01:56,560 because we already know that querySelector 35 00:01:56,560 --> 00:02:00,940 also works on elements, not only on the document. 36 00:02:00,940 --> 00:02:04,970 So let's simply log to the console h1.querySelector 37 00:02:07,034 --> 00:02:09,923 and then let's again, see here what we could select. 38 00:02:12,190 --> 00:02:15,840 So we have this class highlight and this class highlight. 39 00:02:15,840 --> 00:02:18,430 So that's these two green ones, 40 00:02:18,430 --> 00:02:20,430 and so let's select them here. 41 00:02:20,430 --> 00:02:22,560 So that's actually querySelectorAll 42 00:02:22,560 --> 00:02:27,560 because there were two of them, and so class highlight. 43 00:02:29,030 --> 00:02:33,280 So let's take a look and indeed here they are. 44 00:02:33,280 --> 00:02:36,310 So this here indeed selects all the elements 45 00:02:36,310 --> 00:02:38,090 with the highlight class 46 00:02:38,090 --> 00:02:41,080 that are children of the h1 element. 47 00:02:41,080 --> 00:02:43,440 and that would work no matter how deep 48 00:02:43,440 --> 00:02:48,180 these child elements would be inside of the h1 element. 49 00:02:48,180 --> 00:02:51,530 Okay, and that's very important to notice. 50 00:02:51,530 --> 00:02:55,110 All right, now, in this case these two elements here 51 00:02:55,110 --> 00:02:57,670 are direct children of the h1 52 00:02:57,670 --> 00:03:01,710 but as I said, it would go down as deep as necessary 53 00:03:01,710 --> 00:03:03,380 into the Dom tree. 54 00:03:03,380 --> 00:03:07,930 Okay, and also if there were other highlight elements 55 00:03:07,930 --> 00:03:10,820 on the page, so elements with this class, 56 00:03:10,820 --> 00:03:12,600 they would not get selected, 57 00:03:12,600 --> 00:03:16,790 because they would not be children of the h1 element. 58 00:03:16,790 --> 00:03:17,860 All right? 59 00:03:17,860 --> 00:03:20,840 So these are two points that are important to note here 60 00:03:20,840 --> 00:03:23,433 about querySelector and querySelectorAll. 61 00:03:24,720 --> 00:03:28,760 Now, sometimes all we need are actually direct children. 62 00:03:28,760 --> 00:03:31,413 And so for that, we can use h1.childNodes. 63 00:03:36,560 --> 00:03:38,460 So let's take a look. 64 00:03:38,460 --> 00:03:41,980 And so here we actually get all kinds of stuff. 65 00:03:41,980 --> 00:03:45,010 So we get texts we get the comment, 66 00:03:45,010 --> 00:03:47,560 and we get then these elements. 67 00:03:47,560 --> 00:03:49,520 And that's because we already know 68 00:03:49,520 --> 00:03:53,100 that nodes can be anything so they can be texts 69 00:03:53,100 --> 00:03:57,230 or elements or even comments as we have here. 70 00:03:57,230 --> 00:03:58,370 Okay? 71 00:03:58,370 --> 00:04:01,500 So this really gives us, every single node 72 00:04:01,500 --> 00:04:04,510 of every single type that there exists. 73 00:04:04,510 --> 00:04:06,870 But many times we are simply interested 74 00:04:06,870 --> 00:04:08,533 in the elements themselves. 75 00:04:09,530 --> 00:04:10,990 Right? 76 00:04:10,990 --> 00:04:12,450 So if we wanted to text 77 00:04:12,450 --> 00:04:16,483 we could use .textContent or .innerHTML. 78 00:04:18,000 --> 00:04:20,570 So childNodes is not that used 79 00:04:20,570 --> 00:04:25,123 but instead we can use children just like this. 80 00:04:26,361 --> 00:04:29,070 And this then gives us an HTMLCollection 81 00:04:29,070 --> 00:04:33,660 which remembers is a live collection, so it's updated, 82 00:04:33,660 --> 00:04:37,200 and so here we indeed only get the three elements 83 00:04:37,200 --> 00:04:40,133 that are actually inside of the h1. 84 00:04:41,280 --> 00:04:46,280 So that this break in and is span again. 85 00:04:48,000 --> 00:04:52,080 All right, but this one works only for direct children. 86 00:04:52,080 --> 00:04:53,433 So keep that in mind. 87 00:04:54,300 --> 00:04:55,150 Okay? 88 00:04:55,150 --> 00:04:59,110 Finally, there's also first and last element child. 89 00:04:59,110 --> 00:05:02,500 So these names are a little bit confusing, 90 00:05:02,500 --> 00:05:03,640 but one more time, 91 00:05:03,640 --> 00:05:07,110 that's because of the messy nature of JavaScript 92 00:05:07,110 --> 00:05:09,320 with all of these things being implemented 93 00:05:09,320 --> 00:05:11,430 at different points in time. 94 00:05:11,430 --> 00:05:13,220 And so therefore it was difficult 95 00:05:13,220 --> 00:05:16,880 to keep consisting naming conventions. 96 00:05:16,880 --> 00:05:20,750 But anyway, let's use firstElementChild, 97 00:05:20,750 --> 00:05:25,750 and so here it already is, style.color 98 00:05:26,360 --> 00:05:27,943 just so that I can show you 99 00:05:27,943 --> 00:05:31,540 that we can actually also set these properties. 100 00:05:31,540 --> 00:05:34,513 Or use them to set something like the style. 101 00:05:36,460 --> 00:05:38,870 So for example, we can do this, 102 00:05:38,870 --> 00:05:41,210 and then only the first child here 103 00:05:41,210 --> 00:05:43,890 gets now this color set to white. 104 00:05:43,890 --> 00:05:46,480 So basically this element here 105 00:05:46,480 --> 00:05:50,030 which is the first element here of all the children. 106 00:05:50,030 --> 00:05:52,080 That's why it's called firstElementChild. 107 00:05:54,270 --> 00:05:57,520 And we can of course do also lastElementChild, 108 00:05:58,990 --> 00:06:01,403 and let's say this one to black, 109 00:06:02,650 --> 00:06:05,630 so it's a little bit different in how it used to be. 110 00:06:05,630 --> 00:06:09,840 Let's say orange red, I really like this one. 111 00:06:09,840 --> 00:06:12,493 And so now it looks a little bit more crazy. 112 00:06:14,750 --> 00:06:18,233 Okay, but now let's go upwards. 113 00:06:19,490 --> 00:06:20,993 So going upwards. 114 00:06:22,340 --> 00:06:25,940 So basically selecting parents 115 00:06:27,230 --> 00:06:31,520 and for direct parents, it's actually very straightforward. 116 00:06:31,520 --> 00:06:34,853 So here we have h1.parentNode. 117 00:06:36,710 --> 00:06:38,973 And so that one is similar to childNodes. 118 00:06:40,080 --> 00:06:41,043 So let's see. 119 00:06:42,130 --> 00:06:44,163 And so it's this header title. 120 00:06:45,250 --> 00:06:49,540 So as we open this up, we see that indeed this h1 here, 121 00:06:49,540 --> 00:06:51,740 is inside of header title. 122 00:06:51,740 --> 00:06:54,560 And so this is the direct parent, 123 00:06:54,560 --> 00:06:56,253 and so that's why we get this. 124 00:06:57,600 --> 00:06:59,970 Then there's also the parentElement, 125 00:06:59,970 --> 00:07:02,820 which is usually the one that we are interested in. 126 00:07:02,820 --> 00:07:04,903 But in this case, it's simply the same. 127 00:07:06,000 --> 00:07:06,833 All right? 128 00:07:06,833 --> 00:07:10,707 Because this element is also a node in this case. 129 00:07:14,050 --> 00:07:18,090 However, most of the time we actually need a parent element 130 00:07:18,090 --> 00:07:20,810 which is not a direct parent. 131 00:07:20,810 --> 00:07:24,600 Or in other words, we might need to find a parent element 132 00:07:24,600 --> 00:07:28,200 no matter how far away it is and the Dom tree. 133 00:07:28,200 --> 00:07:31,020 And for that, we have the closest method. 134 00:07:31,020 --> 00:07:34,743 So that's h1.closest. 135 00:07:35,640 --> 00:07:39,040 So let's say that on the page, we had multiple headers 136 00:07:39,040 --> 00:07:42,360 so multiple elements with a class of header, 137 00:07:42,360 --> 00:07:43,300 but for some reason 138 00:07:43,300 --> 00:07:45,003 we only wanted to find the one 139 00:07:45,003 --> 00:07:48,290 that is a parent element of h1. 140 00:07:48,290 --> 00:07:50,490 So of all h1 element here. 141 00:07:50,490 --> 00:07:53,220 And so for that, we can use closest. 142 00:07:53,220 --> 00:07:56,450 And so the closest method receives a query string 143 00:07:56,450 --> 00:07:59,413 just like querySelector and querySelectorAll. 144 00:08:00,410 --> 00:08:02,030 All right? 145 00:08:02,030 --> 00:08:03,363 so .header, 146 00:08:04,230 --> 00:08:06,480 and then let's do something with it. 147 00:08:06,480 --> 00:08:08,480 For example, change the background image 148 00:08:10,140 --> 00:08:12,340 or just change the background. 149 00:08:12,340 --> 00:08:16,450 And I will set it here now actually to a CSS variable. 150 00:08:16,450 --> 00:08:17,800 So let me show that to you. 151 00:08:18,880 --> 00:08:22,330 So here we have all of these CSS variables, 152 00:08:22,330 --> 00:08:24,993 or as they are officially called 'custom properties' 153 00:08:25,970 --> 00:08:29,360 and we used them in CSS by doing this. 154 00:08:29,360 --> 00:08:31,020 So by writing variable 155 00:08:31,020 --> 00:08:36,020 and then a color and so well, let's actually use a gradient. 156 00:08:36,900 --> 00:08:37,983 So gradient. 157 00:08:40,510 --> 00:08:41,503 Yeah so this one. 158 00:08:44,060 --> 00:08:45,550 Okay? 159 00:08:45,550 --> 00:08:47,790 Just so you can see that we can use 160 00:08:47,790 --> 00:08:50,560 custom properties also in CSS. 161 00:08:50,560 --> 00:08:54,740 So give it a save and beautiful, 162 00:08:54,740 --> 00:08:58,050 well, it's not that beautiful I must say, 163 00:08:58,050 --> 00:09:00,370 but indeed it worked. 164 00:09:00,370 --> 00:09:04,460 So it selected the closest header to our h1 element, 165 00:09:04,460 --> 00:09:08,480 So the closest parent element that has this class 166 00:09:08,480 --> 00:09:12,560 and then it's simply applied all style to that element. 167 00:09:12,560 --> 00:09:14,640 So this is a very important one 168 00:09:14,640 --> 00:09:16,710 and we're gonna use it all the time 169 00:09:16,710 --> 00:09:19,290 especially for event delegation. 170 00:09:19,290 --> 00:09:23,430 So take a note of that, or just keep it in mind. 171 00:09:23,430 --> 00:09:26,860 Now, if this selector here actually matches the element 172 00:09:26,860 --> 00:09:29,290 on which we're calling closest, 173 00:09:29,290 --> 00:09:32,873 then that's actually the element that's gonna be returned. 174 00:09:33,740 --> 00:09:35,153 So let me also show that. 175 00:09:36,610 --> 00:09:41,170 So, we are calling this on the h1 element. 176 00:09:41,170 --> 00:09:44,340 And so if we're looking for the closest h1, 177 00:09:44,340 --> 00:09:47,330 then that's gonna be exactly the element itself. 178 00:09:47,330 --> 00:09:49,510 And so, as I just said, 179 00:09:49,510 --> 00:09:52,830 then that's gonna be the one that will be returned. 180 00:09:52,830 --> 00:09:54,930 Let's make this a bit more prominent here, 181 00:09:57,020 --> 00:09:58,720 and so you'll see that indeed, 182 00:09:58,720 --> 00:10:01,590 now this is the h1 element itself. 183 00:10:01,590 --> 00:10:03,990 So we can think of closest here 184 00:10:03,990 --> 00:10:06,993 as basically being the opposite of querySelector. 185 00:10:07,980 --> 00:10:11,500 So both receive a query string as an input 186 00:10:11,500 --> 00:10:13,940 but querySelector, finds children, 187 00:10:13,940 --> 00:10:16,260 no matter how deep in the Dom tree, 188 00:10:16,260 --> 00:10:19,250 while the closest method finds parents. 189 00:10:19,250 --> 00:10:22,613 And also no matter how far up in the Dom tree. 190 00:10:23,550 --> 00:10:28,390 All right, so very important method here to keep in mind, 191 00:10:28,390 --> 00:10:30,453 and now let's go sideways. 192 00:10:32,770 --> 00:10:34,313 So selecting siblings, 193 00:10:36,810 --> 00:10:38,610 and for some reason in JavaScript, 194 00:10:38,610 --> 00:10:41,673 we can only access direct siblings. 195 00:10:42,860 --> 00:10:45,763 So basically only the previous and the next one. 196 00:10:46,870 --> 00:10:51,193 So that's h1.previousElementSibling like this, 197 00:10:53,920 --> 00:10:56,747 and then there's also the nextElementSibling. 198 00:10:58,130 --> 00:10:59,500 All right, 199 00:10:59,500 --> 00:11:02,900 so the previous element sibling is null. 200 00:11:02,900 --> 00:11:04,930 And so if we take a look at that, 201 00:11:04,930 --> 00:11:08,550 it makes sense because there is nothing there. 202 00:11:08,550 --> 00:11:11,390 So this is the first child of this parent element, 203 00:11:11,390 --> 00:11:14,370 and therefore it doesn't have a previous sibling 204 00:11:14,370 --> 00:11:16,710 but it has a next sibling. 205 00:11:16,710 --> 00:11:20,203 And so that's this h4 element, which comes after it. 206 00:11:22,720 --> 00:11:26,320 And just like before, we also have the same methods 207 00:11:26,320 --> 00:11:29,163 or actually the same properties for nodes. 208 00:11:30,070 --> 00:11:31,830 So that's just previous sibling 209 00:11:34,810 --> 00:11:36,373 and next sibling. 210 00:11:37,310 --> 00:11:39,980 So let's see, and here the previous sibling 211 00:11:39,980 --> 00:11:41,030 is now actually text, 212 00:11:44,020 --> 00:11:45,673 so not sure what that is. 213 00:11:47,520 --> 00:11:50,130 Well, that's not really important because again, 214 00:11:50,130 --> 00:11:53,020 most of the time we're gonna be working 215 00:11:53,020 --> 00:11:55,720 with the elements anyway. 216 00:11:55,720 --> 00:11:58,360 Now, if we really need all the siblings 217 00:11:58,360 --> 00:12:00,930 and not just the previous and the next one, 218 00:12:00,930 --> 00:12:04,830 then we can use the trick of moving up to the parent element 219 00:12:04,830 --> 00:12:07,243 and then read all the children from there. 220 00:12:08,540 --> 00:12:09,513 So let's see, 221 00:12:10,550 --> 00:12:12,680 so h1.parentElement, 222 00:12:14,450 --> 00:12:17,380 so that's just like we learned before, 223 00:12:17,380 --> 00:12:20,090 so the direct parent, and then from there, 224 00:12:20,090 --> 00:12:22,120 we can get all the children. 225 00:12:22,120 --> 00:12:24,543 So just like we learned here also before, 226 00:12:26,990 --> 00:12:28,423 so .children, 227 00:12:29,870 --> 00:12:33,050 and so now we get all of the siblings 228 00:12:33,050 --> 00:12:35,333 and that of course is gonna include itself. 229 00:12:38,250 --> 00:12:39,770 So that's all of these elements 230 00:12:39,770 --> 00:12:42,003 and all of them are siblings. 231 00:12:43,360 --> 00:12:44,410 And just for fun, 232 00:12:44,410 --> 00:12:46,560 let's actually do something with them here. 233 00:12:47,650 --> 00:12:49,880 So this is an HTMLCollection, 234 00:12:49,880 --> 00:12:53,470 remember, so it's one more time not an array, 235 00:12:53,470 --> 00:12:55,230 but it is still an iterable 236 00:12:55,230 --> 00:12:57,313 that we can spread into an array. 237 00:12:58,170 --> 00:12:59,640 So we can do this, 238 00:12:59,640 --> 00:13:02,653 and it will then create an array from this. 239 00:13:03,600 --> 00:13:05,630 And then we can loop over that array 240 00:13:05,630 --> 00:13:08,623 and do something using the forEach method. 241 00:13:13,300 --> 00:13:15,100 So let's say that we wanted to change 242 00:13:15,100 --> 00:13:17,460 some style to all the siblings, 243 00:13:17,460 --> 00:13:20,130 but accept the element itself. 244 00:13:20,130 --> 00:13:22,430 And actually that's more straight forward 245 00:13:22,430 --> 00:13:27,230 than you might imagine, so we can simply do this here, 246 00:13:27,230 --> 00:13:30,900 so we can check if the element is different 247 00:13:30,900 --> 00:13:34,083 or equal also works, then the h1. 248 00:13:35,190 --> 00:13:39,820 Because h1 is or original element itself. 249 00:13:39,820 --> 00:13:44,820 And so comparisons between elements actually work just fine. 250 00:13:44,870 --> 00:13:45,860 Okay? 251 00:13:45,860 --> 00:13:49,290 And so when the element is not the h1 itself, 252 00:13:49,290 --> 00:13:51,523 then let's change the style, 253 00:13:52,400 --> 00:13:56,430 and let's say we want the transform property, 254 00:13:56,430 --> 00:13:58,163 just to scale them a little bit, 255 00:14:00,310 --> 00:14:03,070 let's say 0.5. 256 00:14:03,070 --> 00:14:05,430 So scaling them by 50% 257 00:14:05,430 --> 00:14:08,170 and indeed all the other three siblings 258 00:14:09,170 --> 00:14:12,240 are now like 50% smaller. 259 00:14:12,240 --> 00:14:13,250 All right? 260 00:14:13,250 --> 00:14:14,930 And so this is how we can work 261 00:14:14,930 --> 00:14:18,930 with all the sibling elements of one element. 262 00:14:18,930 --> 00:14:21,900 Great, and that's actually the fundamentals 263 00:14:21,900 --> 00:14:23,980 of Dom traversing. 264 00:14:23,980 --> 00:14:26,980 And we're gonna need them all the time, and especially, 265 00:14:26,980 --> 00:14:29,810 when we're doing some more complex event delegation 266 00:14:29,810 --> 00:14:32,783 likely will do throughout the rest of the section.