WEBVTT 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.