1 00:00:02,050 --> 00:00:02,883 Okay. 2 00:00:02,883 --> 00:00:03,716 So, in the last lecture, 3 00:00:03,716 --> 00:00:06,880 we had a look at a couple of properties 4 00:00:06,880 --> 00:00:09,020 we can use to drill into the DOM. 5 00:00:09,020 --> 00:00:10,940 And, we talked about text nodes 6 00:00:10,940 --> 00:00:13,053 and HTML element nodes. 7 00:00:13,930 --> 00:00:17,193 Now, let's come back to accessing elements in the DOM. 8 00:00:18,070 --> 00:00:20,230 We learned that we can use the first 9 00:00:21,550 --> 00:00:25,360 Element Child to get access to this H1 element 10 00:00:25,360 --> 00:00:28,490 or Document Body Children, 11 00:00:28,490 --> 00:00:32,122 whoops, children Ciro, for example. 12 00:00:33,540 --> 00:00:34,830 And of course, on the other hand, 13 00:00:34,830 --> 00:00:38,730 if we typed document.body.children[1], 14 00:00:38,730 --> 00:00:40,563 we get access to this paragraph. 15 00:00:41,530 --> 00:00:42,500 And conveniently, 16 00:00:42,500 --> 00:00:45,720 we even get that highlighted here on the left 17 00:00:45,720 --> 00:00:48,220 as I'm typing this command. 18 00:00:48,220 --> 00:00:51,710 So it's really very convenient to play around with that 19 00:00:51,710 --> 00:00:53,763 here in the Chrome Dev Tools. 20 00:00:55,140 --> 00:00:56,560 That all works, and that's great, 21 00:00:56,560 --> 00:00:58,800 if we did want to change the content 22 00:00:58,800 --> 00:01:00,360 of a certain element, 23 00:01:00,360 --> 00:01:02,073 this is how we can select it. 24 00:01:02,950 --> 00:01:04,260 But of course, as mentioned, 25 00:01:04,260 --> 00:01:08,260 when you do dive into your DOM tree, 26 00:01:08,260 --> 00:01:10,330 your DOM structure like this. 27 00:01:10,330 --> 00:01:13,690 You always have to know the exact DOM structure. 28 00:01:13,690 --> 00:01:16,220 And if you ever change it, for example, 29 00:01:16,220 --> 00:01:18,757 if we add a new paragraph in here, 30 00:01:18,757 --> 00:01:20,470 "I'm new", 31 00:01:20,470 --> 00:01:24,220 and we wanted to access this second paragraph, 32 00:01:24,220 --> 00:01:26,910 which before was the only paragraph. 33 00:01:26,910 --> 00:01:31,033 Then we have to adjust our code where we drill into the DOM, 34 00:01:31,950 --> 00:01:33,690 because, now all of a sudden, 35 00:01:33,690 --> 00:01:37,550 the paragraph is not the second child in Body Children, 36 00:01:37,550 --> 00:01:39,320 but the third one. 37 00:01:39,320 --> 00:01:40,870 So that can be a disadvantage, 38 00:01:40,870 --> 00:01:43,200 if you drill into your DOM like this. 39 00:01:43,200 --> 00:01:44,110 And you see here, 40 00:01:44,110 --> 00:01:45,640 I'm already getting an error, 41 00:01:45,640 --> 00:01:47,400 if I go back to my page, 42 00:01:47,400 --> 00:01:49,700 because the code we have in app.js 43 00:01:49,700 --> 00:01:52,820 did try to access the second element, 44 00:01:52,820 --> 00:01:55,780 which previously was the paragraph with the link, 45 00:01:55,780 --> 00:01:58,310 and then the first child off that element, 46 00:01:58,310 --> 00:02:01,133 which previously was our anchor element. 47 00:02:02,420 --> 00:02:04,040 But since I did now, 48 00:02:04,040 --> 00:02:08,280 insert does new paragraph in front of this second paragraph, 49 00:02:08,280 --> 00:02:10,509 the second element, 50 00:02:10,509 --> 00:02:12,610 which we're accessing in our body, 51 00:02:12,610 --> 00:02:14,500 is now that new paragraph, 52 00:02:14,500 --> 00:02:17,240 because that is the second element here. 53 00:02:17,240 --> 00:02:21,200 And when I then try to access the first element in there, 54 00:02:21,200 --> 00:02:23,800 then this element doesn't exist anymore, 55 00:02:23,800 --> 00:02:27,113 because this paragraph has no child element. 56 00:02:27,990 --> 00:02:32,950 It has a text node, but no HTML child element. 57 00:02:32,950 --> 00:02:35,630 And that's why I'm getting this error here. 58 00:02:35,630 --> 00:02:38,503 We're trying to set 'href' on an element, 59 00:02:39,468 --> 00:02:42,970 which we did not find, which was undefined, so to say. 60 00:02:42,970 --> 00:02:46,470 And that's why using this drilling approach 61 00:02:46,470 --> 00:02:48,360 can sometimes be useful, 62 00:02:48,360 --> 00:02:51,480 but mostly only if you want to access the direct child 63 00:02:51,480 --> 00:02:54,730 or parent element of another element. 64 00:02:54,730 --> 00:02:55,563 Instead, 65 00:02:55,563 --> 00:02:59,030 it's more common that you use these query functions, 66 00:02:59,030 --> 00:03:00,640 these query methods, 67 00:03:00,640 --> 00:03:03,203 which are provided to you by the browser.