1 00:00:02,260 --> 00:00:08,230 One important node about all these DOM traversal techniques here by the way - it's super important to 2 00:00:08,230 --> 00:00:09,000 be aware of them 3 00:00:09,010 --> 00:00:15,340 and as I mentioned, for example if you want the first list item for unordered list and you have the unordered 4 00:00:15,340 --> 00:00:20,860 list selected anyways, it might be best to just use first element child to get access to the list item 5 00:00:21,100 --> 00:00:26,380 than to run a brand new query with query selector, both for performance reasons but also save some 6 00:00:26,380 --> 00:00:33,640 code. Here, it also makes sense because a list item is pretty guaranteed to always be a child of an unordered 7 00:00:33,780 --> 00:00:39,850 list and therefore even if you later go to your HTML code and you change things around, it's to be expected 8 00:00:39,850 --> 00:00:44,250 that this relation between unordered list and list item will be the same. 9 00:00:44,260 --> 00:00:49,870 So if you have code where you select the first element child on an unordered list, it will probably always 10 00:00:49,870 --> 00:00:54,460 be a list item. That might not be true for your entire page, 11 00:00:54,460 --> 00:01:00,100 let's say here in this example page, we write some js code and for that, I'll clear that old code which 12 00:01:00,160 --> 00:01:01,340 I don't really need here 13 00:01:01,630 --> 00:01:05,520 and I select my unordered list by reaching out to document body 14 00:01:05,890 --> 00:01:11,580 and then here in document body, in the end it's of course the sibling of this header, right? 15 00:01:11,630 --> 00:01:16,490 So I could reach out to a first element child which is the header, because in my body, this first element 16 00:01:16,490 --> 00:01:18,920 child is the header and then based on that, 17 00:01:18,920 --> 00:01:24,780 so once I got the header selected, I could take the next sibling because that will be the unordered list. 18 00:01:24,830 --> 00:01:32,040 So here on the first element child which is the header, we could now call next element sibling, 19 00:01:32,060 --> 00:01:37,670 so that would work because this here up to this point, this selects the header, 20 00:01:37,760 --> 00:01:43,340 so on the header object, we can of course call next element sibling to get access to the next element 21 00:01:43,340 --> 00:01:45,600 sibling which is our unordered list. 22 00:01:45,620 --> 00:01:53,900 So now if we want to get the first li, I can of course say ul first element child and if I console 23 00:01:54,680 --> 00:02:01,340 log first li here and we save that and we reload this page, go to the console and reload, 24 00:02:01,490 --> 00:02:02,840 we see that works. 25 00:02:02,840 --> 00:02:06,560 The problem with that is, for one this is a bit hard to read. 26 00:02:06,620 --> 00:02:12,680 If I'm reading your code, it's not immediately obvious for me that you are selecting an unordered list 27 00:02:12,680 --> 00:02:13,240 here. 28 00:02:13,250 --> 00:02:19,220 Sure, I can tell by this constant name but if you're picking a different name here, it gets hard and this 29 00:02:19,220 --> 00:02:24,680 code might be simply difficult to understand because I have to look at the HTML code to see what you're 30 00:02:24,680 --> 00:02:25,340 doing there, 31 00:02:25,340 --> 00:02:32,360 so that's one downside. The bigger downside is that here, maybe as you work on this app, at some point 32 00:02:32,360 --> 00:02:40,520 of time you decide oh, I need an extra section element here, a section tag and you move your unordered 33 00:02:40,520 --> 00:02:42,570 list into this section. 34 00:02:42,650 --> 00:02:48,470 Now if you do that and you don't adjust your app.js file which is easy to overlook, then you might 35 00:02:48,470 --> 00:02:53,870 get unexpected behaviours in your app because now if we reload, we of course get the unordered list 36 00:02:53,870 --> 00:02:59,870 selected here and not the first list item anymore because we didn't adjust the selection code and we 37 00:02:59,870 --> 00:03:05,660 select the header and then its next element sibling which now no longer is the unordered list but which 38 00:03:05,660 --> 00:03:07,470 is this section. 39 00:03:07,610 --> 00:03:13,100 So if we then select the first element child of the sibling of the header, that's not the first list item 40 00:03:13,100 --> 00:03:18,290 anymore but the unordered list because the sibling of the header was the section, the first child is 41 00:03:18,290 --> 00:03:19,820 this unordered list. 42 00:03:19,940 --> 00:03:25,850 So using these DOM traversal properties can be very powerful but you should do it with care, 43 00:03:25,850 --> 00:03:33,110 use it in cases where it's likely that the relation you're traversing will stay the same, even if you move 44 00:03:33,110 --> 00:03:39,110 code around, list items will always been in an unordered list. In cases where this can't be guaranteed, carefully 45 00:03:39,110 --> 00:03:45,450 check your js code and adjust it if you adjusted the HTML code and also of course, 46 00:03:45,590 --> 00:03:47,860 don't be shy to use the query methods, 47 00:03:47,870 --> 00:03:53,120 they're not bad or anything like that. Just because this could yield a better performance does not mean 48 00:03:53,120 --> 00:03:57,410 that the other approach yields horrible performance, you'll not even feel the difference. 49 00:03:57,530 --> 00:04:02,570 Just try to be smart regarding what you use and that is also something that will come with experience, 50 00:04:02,570 --> 00:04:04,910 there also is no strict wrong or right, 51 00:04:04,940 --> 00:04:10,700 it's important to know both and in cases where the relation is always the same, DOM traversal properties 52 00:04:10,700 --> 00:04:17,630 like this one can be nice for general selection things, like generally selecting an unordered list. Using 53 00:04:17,630 --> 00:04:24,230 query selector might be better than trying to do that by traversing the DOM but that's just a general 54 00:04:24,350 --> 00:04:25,840 hint or just a thought 55 00:04:25,850 --> 00:04:31,550 I wanted to put out there to make sure that you are able to write good code that doesn't suddenly and 56 00:04:31,550 --> 00:04:32,630 unexpectedly break.