1 00:00:02,400 --> 00:00:04,320 So that's children and child nodes, 2 00:00:04,350 --> 00:00:06,930 now I'll reload this page to clear all of that 3 00:00:06,930 --> 00:00:09,900 and now, let's actually go in the opposite direction. 4 00:00:09,900 --> 00:00:15,750 Let's say we already selected a list item, let's say the first one so that we can use a query method 5 00:00:15,750 --> 00:00:17,790 without any issues 6 00:00:17,880 --> 00:00:20,650 and now we want to reach out to the unordered list, 7 00:00:20,670 --> 00:00:21,730 so to the parent. 8 00:00:21,840 --> 00:00:27,350 Now needless to say, you can of course get access to the unordered list for example with query selector 9 00:00:27,390 --> 00:00:27,600 ul, 10 00:00:27,670 --> 00:00:28,470 right? 11 00:00:28,470 --> 00:00:33,870 But it's about understanding how you can traverse the document so that in a scenario where you have 12 00:00:33,870 --> 00:00:41,690 a more complex document, you are able to easily reach out to the parent for example. So here I get my 13 00:00:41,840 --> 00:00:48,050 list item now and I don't select the unordered list but instead, the first matching list item here, 14 00:00:48,050 --> 00:00:50,030 here we need an equals sign, 15 00:00:50,030 --> 00:00:50,840 yes 16 00:00:50,970 --> 00:00:53,930 li is of course already defined here in our script, 17 00:00:53,930 --> 00:00:54,230 right, 18 00:00:54,230 --> 00:00:59,450 this already gets access to the last list item here actually, 19 00:00:59,450 --> 00:01:02,620 so I'll use a different constant name, 20 00:01:02,960 --> 00:01:10,160 Ii first document query selector li, of course we could have also worked with that last one. 21 00:01:10,190 --> 00:01:16,400 So now to get the parent, we can use li first parent element or parent node. 22 00:01:16,400 --> 00:01:24,530 Now this is not parents or parents nodes or parent nodes simply because each element, each node 23 00:01:24,650 --> 00:01:29,810 can only have one parent, that's how HTML works and how it's rendered. 24 00:01:29,840 --> 00:01:33,660 You can have multiple child elements or multiple child nodes, 25 00:01:33,830 --> 00:01:39,920 you can't have more than one parent element or parent node. So here, parent node gives us access to the 26 00:01:39,920 --> 00:01:43,990 nearest parents node, parent element to the nearest parent element node 27 00:01:44,030 --> 00:01:46,160 and in this case, this is actually the same 28 00:01:46,160 --> 00:01:50,530 and to be honest, in almost all cases it's the same, 29 00:01:50,540 --> 00:01:51,100 why? 30 00:01:51,500 --> 00:01:58,880 Because only element nodes can have child nodes and therefore of course if you're on a child node so 31 00:01:58,880 --> 00:02:04,790 to say and you want to know all about the parent, it's an element node, text nodes can't have child nodes, 32 00:02:04,790 --> 00:02:08,200 you can't nest other content into text nodes for example, 33 00:02:08,300 --> 00:02:15,140 they can only hold text, no other nested content. So you might wonder, why do we have parent node and parent 34 00:02:15,170 --> 00:02:16,410 element then? 35 00:02:16,430 --> 00:02:24,170 Well there is only one exception to that rule and that is document document element. There if you reach 36 00:02:24,170 --> 00:02:25,160 out to parent element, 37 00:02:25,160 --> 00:02:31,970 you see we get null but if I repeat this and use parent node instead, we get the entire document object 38 00:02:31,970 --> 00:02:34,330 as a parent node and I will be very honest, 39 00:02:34,340 --> 00:02:42,290 this might be nice to know it is something which will probably never really matter in the code you write, 40 00:02:42,290 --> 00:02:46,550 in your projects because if you want to get access to the document, you can just select it with the 41 00:02:46,610 --> 00:02:53,540 document object. Traversing to it from some child node might just be a lot of work for something which 42 00:02:53,540 --> 00:02:55,730 is already available on this document object, right? 43 00:02:55,730 --> 00:02:58,900 So I don't really see a great use case for this, 44 00:02:58,910 --> 00:03:02,800 I just wanted to let you know why both exists, in reality 45 00:03:02,870 --> 00:03:09,470 as I said for all other elements, parent element and parent node always refers to the nearest parent element 46 00:03:09,620 --> 00:03:14,840 and that always is guaranteed to be an element node and therefore you can use either of the two depending 47 00:03:14,840 --> 00:03:16,700 on what you prefer. 48 00:03:16,700 --> 00:03:19,250 Now let's get back to the other example here 49 00:03:19,250 --> 00:03:25,760 I have my li first element and I reloaded the page, so I'll reselect it and now let's say from that 50 00:03:25,760 --> 00:03:30,500 first list item, I want to get access to the body here. 51 00:03:30,500 --> 00:03:35,300 Now this is kind of a redundant example because you can always easily get access to the body with document.body 52 00:03:35,300 --> 00:03:40,490 but I'm just picking this as an example since I have no other ancestor in between the unordered 53 00:03:40,490 --> 00:03:45,620 list and the body and I want to show you that of course selecting the unordered list is easy with parent 54 00:03:45,620 --> 00:03:47,240 node or parent element 55 00:03:47,240 --> 00:03:52,130 but if we want to reach out to another ancestor and header for example wouldn't be an ancestor because 56 00:03:52,130 --> 00:03:54,160 it's not wrapped around the unordered list, 57 00:03:54,260 --> 00:03:58,880 so if you want to get access to another ancestor, parent node and parent element don't help us because with 58 00:03:58,880 --> 00:04:05,960 those, we only get access to the nearest direct parent, not to any other ancestor. To get access to another 59 00:04:05,990 --> 00:04:13,260 ancestor like body which is an ancestor, we can use the closest method and the closest method takes a 60 00:04:13,260 --> 00:04:19,250 CSS selector just like query selector and here for example, I can enter body and if I hit enter, 61 00:04:19,250 --> 00:04:25,550 you see now the body element is selected and just to prove that this wouldn't work with header which 62 00:04:25,550 --> 00:04:32,480 isn't an ancestor, if we try that, we get null. So closest is a nice method for selecting any ancestor 63 00:04:32,600 --> 00:04:34,880 anywhere up in the element tree 64 00:04:34,880 --> 00:04:40,550 as long as it indirectly wraps the unordered list in this case here or this list item in the end, that's 65 00:04:40,550 --> 00:04:41,720 what matters here 66 00:04:41,870 --> 00:04:48,410 and then closest just takes a CSS selector to allow us to conveniently pick the nearest ancestor 67 00:04:48,530 --> 00:04:49,490 element. 68 00:04:49,550 --> 00:04:55,040 Now if you want to pick the nearest descendant element, then of course that would be done with query 69 00:04:55,040 --> 00:04:56,050 selector and so on, right, 70 00:04:56,090 --> 00:04:59,330 that's for diving into nested elements of the selected element.