1 00:00:02,340 --> 00:00:08,340 We had a look at how you can select elements in the DOM with query selector, with get element 2 00:00:08,340 --> 00:00:10,080 by ID and so on, 3 00:00:10,080 --> 00:00:17,370 we also had a look at how you can then use these elements to manipulate them or to simply read data from 4 00:00:17,370 --> 00:00:18,480 them. 5 00:00:18,480 --> 00:00:25,110 Now there is another connected concept, connected to selecting elements which is typically known as 6 00:00:25,170 --> 00:00:26,980 traversing the DOM 7 00:00:27,030 --> 00:00:29,690 and what does traversing the DOM mean? 8 00:00:29,730 --> 00:00:37,770 It means that once you selected one element, one node therefore, you might be interested in diving into 9 00:00:37,800 --> 00:00:45,200 all of its child nodes, for example to add it all list items in a list or anything like that, 10 00:00:45,210 --> 00:00:51,880 so rather than manually selecting every element you might be interested in with query selector or so on, 11 00:00:52,110 --> 00:00:57,660 you could take an element which you already did select and then move to its children or its siblings 12 00:00:57,660 --> 00:00:58,580 and so on 13 00:00:58,740 --> 00:01:03,410 based on that element, that's what's traversing the DOM means. Now for that, I 14 00:01:03,450 --> 00:01:09,690 first of all want to clarify a couple of terms which I'll use - children, descendants, parent and ancestors 15 00:01:09,900 --> 00:01:13,490 because it's important to understand what these things mean. 16 00:01:13,620 --> 00:01:20,070 So let's have a look at what child or children means, what descendant or descendants mean, what parent 17 00:01:20,070 --> 00:01:23,820 or parents mean and what ancestor or ancestors mean. 18 00:01:23,820 --> 00:01:31,290 Now when I say child, if I speak about a child element when talking about these DOM traversal methods 19 00:01:31,290 --> 00:01:38,330 you learned about, then this always means a direct child node or an element, so an element node 20 00:01:38,430 --> 00:01:45,450 and with that I mean that here in this small example, the paragraph is a child of the div because it's 21 00:01:45,450 --> 00:01:50,130 a direct child element, it's directly below the div, one layer below it 22 00:01:50,130 --> 00:01:58,860 so to say, the em tag, the emphasized tag however isn't because whilst the em tag is still kind of nested 23 00:01:58,860 --> 00:02:01,870 inside of the div tag, it's not a direct child, 24 00:02:01,890 --> 00:02:04,800 the paragraph, the p tag is in between, 25 00:02:04,860 --> 00:02:12,390 so the p tag is a child, the em tag is not a child of the div in this case. Now descendant on the other 26 00:02:12,390 --> 00:02:16,130 hand is a direct or indirect child node or element, 27 00:02:16,130 --> 00:02:23,480 so when we talk about a descendant, then in the same example both the paragraph but also the the em tag would 28 00:02:23,480 --> 00:02:26,040 be descendants of div. 29 00:02:26,150 --> 00:02:30,170 So p, the paragraph tag is a child and a descendant, 30 00:02:30,260 --> 00:02:35,240 the em tag is not a child but a descendant of div 31 00:02:35,240 --> 00:02:40,030 in this example. Now a parent and ancestor are kind of the opposite - 32 00:02:40,040 --> 00:02:45,590 a parent node or element is the direct parent node or element of another element, 33 00:02:45,620 --> 00:02:52,370 so in this example here still, the div is a parent of the paragraph but not of em for the same reason 34 00:02:52,400 --> 00:02:56,470 as em is not a child of the div and the ancestor on the other hand, 35 00:02:56,480 --> 00:03:02,930 if I talk about an ancestor element or node, then this is a direct or indirect parent relation, 36 00:03:02,960 --> 00:03:10,670 so there for example in that same example, we have div as an ancestor of both the paragraph and the em tag, 37 00:03:10,700 --> 00:03:14,240 so that is important, that's an important differentiation, 38 00:03:14,270 --> 00:03:20,330 it will be important to keep in mind when talking about the DOM traversal and what you can do there. 39 00:03:20,480 --> 00:03:24,800 Now as i said, DOM traversal means that you have a selected element, a selected node, 40 00:03:24,800 --> 00:03:32,810 let's say this div element node here and now you want to dive into some of the surrounding or nested 41 00:03:33,140 --> 00:03:39,620 elements or nested nodes and there, you've got a couple of directions into which you can go. 42 00:03:39,620 --> 00:03:47,330 You can always go up, so find a parent element or node with parent node or parent element, 43 00:03:47,330 --> 00:03:52,370 so with these specific properties which every DOM object will have, 44 00:03:52,400 --> 00:03:58,640 so every element object which you can select no matter if it's a div or a paragraph or whatever, it will 45 00:03:58,640 --> 00:04:02,170 have this parent node and parent element property, 46 00:04:02,210 --> 00:04:09,530 the difference being that parent node selects any parent node whereas parent element only selects 47 00:04:09,530 --> 00:04:12,060 a parent node that also is an element, 48 00:04:12,110 --> 00:04:14,520 so only parent HTML elements. 49 00:04:14,720 --> 00:04:22,310 There also is the closest method which you can use, to not just take a direct parent but take any ancestor 50 00:04:22,670 --> 00:04:25,020 that matches a certain CSS query 51 00:04:25,040 --> 00:04:29,580 and I'll show you how all of these work in action in the next lectures of course. 52 00:04:29,630 --> 00:04:34,520 Now of course, you can also go the opposite direction and instead of reaching out to a parent or ancestor 53 00:04:34,520 --> 00:04:39,430 element, you can also reach out to a child or descendent element. 54 00:04:39,530 --> 00:04:43,960 There you have child nodes and children, child nodes to select all 55 00:04:43,970 --> 00:04:50,660 child nodes including text nodes, children to only select child element nodes, so only HTML 56 00:04:50,720 --> 00:04:51,980 element objects 57 00:04:52,160 --> 00:04:58,080 and of course as I also showed you already, you can use query selector, get elements by a class name and 58 00:04:58,080 --> 00:05:01,610 so on on any selected element node as well, 59 00:05:01,670 --> 00:05:06,230 so these are also methods which are always available on any selected element object and therefore 60 00:05:06,230 --> 00:05:11,810 you can always use these to dive deeper into all the descendants you might find there in that part of 61 00:05:11,810 --> 00:05:15,740 the DOM tree based on that element which you already selected. 62 00:05:15,800 --> 00:05:22,130 Now there also are special properties you can use to get the first child which selects the first child 63 00:05:22,160 --> 00:05:28,880 node and first element child to select the first element child node of a given element and the same is 64 00:05:28,880 --> 00:05:34,820 available for the last child, the last child node and the last element child node which you can select 65 00:05:34,820 --> 00:05:42,920 for a given element. So that's for going up in the DOM tree or going deeper into the DOM tree, so into 66 00:05:42,920 --> 00:05:44,680 nested elements, 67 00:05:44,720 --> 00:05:49,330 now maybe you want to stay on the same level and want to select sibling elements. For that, you've got 68 00:05:49,340 --> 00:05:55,280 the previous sibling and previous element sibling properties on any DOM object which allows you to get 69 00:05:55,280 --> 00:06:01,730 the direct sibling of an element and that of course works in both directions to get the sibling before 70 00:06:01,760 --> 00:06:07,820 or after the currently selected element and previous sibling and next sibling give you the next sibling 71 00:06:07,910 --> 00:06:15,470 node, previous elements sibling and next element sibling give you the next element node that is a sibling 72 00:06:15,470 --> 00:06:18,450 of the selected node. So that's the theory, 73 00:06:18,560 --> 00:06:20,150 let's have a look at it in practice.