WEBVTT 00:00.990 --> 00:07.020 In this lecture, I'm going to talk about what is a dumb navigation from the previous videos, do you 00:07.020 --> 00:11.650 remember that HMO document represents a structure like a family tree. 00:12.570 --> 00:20.370 So if we go back to Brackett's and take a look on our index file, you will find that some of the elements 00:20.370 --> 00:26.640 are in site, other elements, which also include other elements, and some of them are placed side 00:26.640 --> 00:27.150 by side. 00:27.930 --> 00:34.280 This fact defines the relationship among the elements like parent, child, sibling and so on. 00:35.490 --> 00:42.720 For example, if you look at the list element, you will see that it is apparent for the programs and 00:42.740 --> 00:43.470 input out. 00:44.370 --> 00:50.760 But on the other hand, it is a child for you will aliment, therefore you will is its parent. 00:52.020 --> 00:56.910 The rest of the list elements which are placed side by side or siblings to each other. 00:58.170 --> 01:04.590 In this video, I'm going to introduce you some dumb properties which allow us to navigate between the 01:04.590 --> 01:05.040 elements. 01:05.720 --> 01:12.390 I think that for giving better explanations regarding dumb navigation would be perfect to select second 01:12.390 --> 01:13.130 list elements. 01:14.490 --> 01:17.820 Therefore, I'm going to assign to it I attribute. 01:18.420 --> 01:22.080 So right here I'd list item. 01:25.380 --> 01:27.730 Then go to cryptologist file. 01:29.160 --> 01:35.670 I want to note that if you have an access on any HDMI element, then using some of the properties, 01:35.670 --> 01:41.770 you are able to reach to its parent element, grandparents, child elements and siblings. 01:42.810 --> 01:45.930 OK, let's select second list element. 01:46.970 --> 01:49.070 Right, variable list item. 01:51.070 --> 01:55.030 Equals documents that get element by ID. 01:57.290 --> 01:59.600 And pass the ID at least item. 02:03.430 --> 02:11.890 In order to access on its parent element, we can use a property parent node and I'm going to work in 02:11.890 --> 02:12.520 council. 02:13.180 --> 02:16.600 So write your list item dot parent node. 02:20.760 --> 02:28.440 And you see that we've got your element using this property, we can access from least element to its 02:28.440 --> 02:33.650 grandparent for that we can add to the list item dorper. 02:33.670 --> 02:36.780 Note another part, note property. 02:39.640 --> 02:47.980 So we have here development, and if you take a look on extremophile, you will find that our last element 02:47.980 --> 02:57.070 is surrounded by you, all elements, which is its parent, and you will itself is surrounded by development 02:57.070 --> 03:03.070 with class name no Titlist, OK, instead of A.. 03:03.070 --> 03:07.090 We can use the exact similar property, which is called parent elements. 03:07.610 --> 03:09.510 They work in the exact same way. 03:10.060 --> 03:14.710 So if we change parent nodes into parent elements then. 03:16.300 --> 03:18.400 We will get again, you, aunt. 03:20.420 --> 03:23.090 So he can use any of those properties. 03:25.340 --> 03:31.550 All right, they also allow us to manipulate on elements, for example, we can change the background 03:31.550 --> 03:40.730 color for you, all elements for that right to your list items or parent elements that style. 03:42.700 --> 03:43.810 That background. 03:47.130 --> 03:49.590 Equals to, let's say, orange. 03:52.310 --> 03:55.440 And here we go, the background of fuel is orange. 03:57.200 --> 04:02.630 OK, the next I'm going to use the property, which is called Child Notes. 04:03.260 --> 04:07.970 So let's right here at least item dot child notes. 04:13.340 --> 04:21.710 And you see that it gives us a no lists, and inside it we have all the items which are included in 04:21.710 --> 04:27.580 the list element and also we have here text items which are called text notes. 04:28.640 --> 04:33.490 They are actually the white spaces, which are between the elements. 04:34.310 --> 04:38.980 So when you use child notes property, they are recognized as text notes. 04:39.650 --> 04:46.160 If we go back to the original file and then remove these white spaces. 04:47.980 --> 04:51.820 So we need to place all those elements on one line. 04:55.270 --> 04:59.830 There were four text notes, therefore, we need to get rid of four white spaces. 05:02.850 --> 05:07.410 Then reload the page and use again child notes property. 05:11.260 --> 05:15.250 You see that we have, again, no list, but without tax notes. 05:16.560 --> 05:22.370 All right, there is a better solution which allows us to avoid this kind of messy work. 05:23.280 --> 05:30.510 I mean, if we use the property called children, it will ignore all these white spaces and return the 05:30.510 --> 05:31.380 actual elements. 05:31.980 --> 05:32.280 So. 05:32.280 --> 05:35.910 Right list item that children. 05:38.840 --> 05:46.010 So we have the exact same results, but there is only one difference in case of children, Prop. eight 05:46.010 --> 05:53.960 returns, HD collection, and of course you are able to use index numbers for accessing on any element 05:53.960 --> 05:54.550 inside them. 05:56.060 --> 05:56.510 All right. 05:58.880 --> 06:02.420 Let's get back to those white spaces. 06:04.600 --> 06:08.770 And move on to another property, which is called First Child. 06:10.920 --> 06:16.170 Reload the page and use again, list item, so right, list item, dot, first child. 06:20.070 --> 06:27.990 And you see that again here we have a text note, this property, like child notes, recognizes the 06:27.990 --> 06:29.690 white spaces as tax notes. 06:30.510 --> 06:38.370 So in order to reach directly to the child element, which is a paragraph in this case, and also avoid 06:38.370 --> 06:44.430 removing white space manually, we can use another property, which is first element child. 06:45.280 --> 06:48.470 It works in the same way, but ignores white spaces. 06:48.960 --> 06:52.200 So write list item dot first element child. 06:56.190 --> 07:02.570 And you see that we've got directly paragraph, which is their first child element for at least elements. 07:04.560 --> 07:12.600 All right, I believe that the other guest, if we have first child and first element child properties, 07:13.050 --> 07:15.690 then Dom allows us to use a last child. 07:18.450 --> 07:22.440 And last element, child properties. 07:26.210 --> 07:32.300 The difference is that they grab last text note and last element from the least in this case. 07:35.160 --> 07:43.410 OK, so we have referred how to access and parents and on child elements, the only thing that I want 07:43.410 --> 07:49.800 to demonstrate in this lecture is how to get access on siblings so that we need to use properties like 07:50.190 --> 07:55.190 previous sibling, previous aliment sibling, next sibling and next sibling. 07:55.800 --> 07:57.720 So writes list item DOT. 07:57.720 --> 07:58.770 Previous sibling. 08:03.400 --> 08:12.220 And we have tax not so again, like child notes and first child property's previous sibling and also 08:12.220 --> 08:16.590 next sibling properties count whitespace as a tax note. 08:17.440 --> 08:22.210 And again, the solution is that we have to use previous element sibling. 08:23.350 --> 08:30.880 And next on sibling instead of that, so if you write your list item, that previous element sibling. 08:35.570 --> 08:38.510 Then you will get first at least aliments. 08:40.840 --> 08:44.410 And in the same way, if you use next elements, sibling. 08:49.460 --> 08:51.620 Then you will get third at least element. 08:54.250 --> 09:01.870 OK, so I want to recommend to practice on your own using those properties, because I know that everything 09:01.870 --> 09:08.170 seems very simple, but actually without practice, you may forget afterwards how those properties work. 09:09.710 --> 09:10.820 See you in the next video.