1 00:00:02,180 --> 00:00:04,460 So that's how we can go up and down the tree, 2 00:00:04,460 --> 00:00:10,760 now what if I actually want to select the header based on a selection of the unordered list or even 3 00:00:10,760 --> 00:00:12,740 of the list item? 4 00:00:12,740 --> 00:00:20,030 Well if that's the case, li is already my last list item here because we have that here in our Javascript 5 00:00:20,030 --> 00:00:22,430 code that we select this list item 6 00:00:22,430 --> 00:00:28,970 and now when we want to reach out to the unordered list, that's of course easily doable by reaching out 7 00:00:28,970 --> 00:00:35,420 to li parent element or parent node and I'll store the result in ul because that will be my unordered 8 00:00:35,420 --> 00:00:36,500 list here as you can tell, 9 00:00:36,560 --> 00:00:37,310 right. 10 00:00:37,310 --> 00:00:39,830 So that's what I selected here with something you already knew 11 00:00:39,920 --> 00:00:46,210 and I'm storing this reference to the DOM object which I in the end get here in my ul constant. Of course 12 00:00:46,220 --> 00:00:52,880 that's the same as if I would have done query selector ul in this example here. In other examples 13 00:00:52,880 --> 00:00:57,290 where you might have multiple unordered lists on the page, that might not be the same, you might be selecting 14 00:00:57,290 --> 00:01:02,090 a totally different unordered list. Here in this example where we only have one, that would of course 15 00:01:02,090 --> 00:01:03,460 be the same. 16 00:01:03,560 --> 00:01:08,370 So we have the unordered list selected and now I want to get access to the header here. 17 00:01:08,480 --> 00:01:11,190 Now the header is a sibling of the unordered list, 18 00:01:11,210 --> 00:01:13,460 it's on the same level as unordered list. 19 00:01:13,670 --> 00:01:15,840 It's not a parent or an ancestor 20 00:01:15,920 --> 00:01:18,200 and it's also not a child or a descendant, 21 00:01:18,230 --> 00:01:20,030 it's on the same level 22 00:01:20,090 --> 00:01:27,740 and for that we can use the previous sibling or element sibling properties which are made available by 23 00:01:27,740 --> 00:01:35,200 the browser. Now just as before with child nodes and so on, here previous sibling gives us the previous sibling 24 00:01:35,290 --> 00:01:35,830 node 25 00:01:35,830 --> 00:01:38,720 and in this case, that's actually a text node, 26 00:01:38,800 --> 00:01:45,580 so that's this text node, this line break and excess whitespace we have in front of every item in the end. 27 00:01:45,970 --> 00:01:51,360 Here if we have a look at the HTML code, in front of the unordered list, we have this excess whitespace 28 00:01:51,360 --> 00:01:53,290 and this line break after header here, 29 00:01:53,620 --> 00:01:57,180 so that's the nearest node we're selecting here with previous sibling. 30 00:01:57,370 --> 00:02:02,140 Of course if I want to reach out to the header, I'm not interested in the nearest node, I'm not interested 31 00:02:02,140 --> 00:02:05,780 in this text node which is basically between the header and the unordered list, 32 00:02:05,860 --> 00:02:12,130 I want to get the nearest element node and I can do that with ul, let me clear that to make it easier 33 00:02:12,130 --> 00:02:15,490 to read, ul previous elements sibling, 34 00:02:15,490 --> 00:02:20,770 this gives us the nearest previous sibling element node, not any node but the nearest element node which 35 00:02:20,770 --> 00:02:26,650 of course in this example here is the header and it also works in the other direction of course. If I 36 00:02:26,650 --> 00:02:31,120 want to get the sibling after the unordered list, so the input here, 37 00:02:31,120 --> 00:02:36,640 well then of course I can use my unordered list here and then we have next sibling to get the next sibling 38 00:02:36,640 --> 00:02:37,240 node. 39 00:02:37,240 --> 00:02:43,660 Again, that would be a text node because if we have a look here in our code maybe, after unordered list, 40 00:02:43,690 --> 00:02:45,990 we have a line break, then some space, 41 00:02:46,090 --> 00:02:52,870 so a couple of whitespaces here and then an input and therefore we have this text node. So if I'm 42 00:02:52,870 --> 00:02:57,610 interested in the next sibling element node, then we would have to use next elements sibling 43 00:02:57,610 --> 00:03:02,440 and this gives us access to the input which is the next element node in line here. 44 00:03:02,470 --> 00:03:07,520 So this is how that works and how you can work with these different DOM traversal techniques, 45 00:03:07,560 --> 00:03:13,900 this is always useful if you already selected some element in your document and you know the next operation 46 00:03:13,900 --> 00:03:20,350 I want to do should be done to the next sibling or to the first child or something like this. 47 00:03:20,680 --> 00:03:27,850 Using these traversal properties can simply be quicker, that always starting a new query with query selector 48 00:03:27,850 --> 00:03:34,450 and so on and it's also not just faster for you as a developer, where you don't have to find a selection 49 00:03:34,450 --> 00:03:35,530 criteria, 50 00:03:35,530 --> 00:03:40,960 it's also faster for the browser because with query selector, if you use document query selector, it of 51 00:03:40,960 --> 00:03:46,010 course has to go over all elements in your document and find matching ones, 52 00:03:46,240 --> 00:03:52,890 that is still not super bad but it's certainly worse for performance than if you say ul next elements 53 00:03:52,900 --> 00:03:53,730 sibling. 54 00:03:53,830 --> 00:03:58,690 So if you have a possibility of reaching out to the element you want to select with this command, definitely 55 00:03:58,690 --> 00:04:03,790 do it because this is then a quick and cheap way of getting access to that sibling element in this case.