In this lecture, I'm going to talk about what is a dumb navigation from the previous videos, do you
remember that HMO document represents a structure like a family tree.
So if we go back to Brackett's and take a look on our index file, you will find that some of the elements
are in site, other elements, which also include other elements, and some of them are placed side
by side.
This fact defines the relationship among the elements like parent, child, sibling and so on.
For example, if you look at the list element, you will see that it is apparent for the programs and
input out.
But on the other hand, it is a child for you will aliment, therefore you will is its parent.
The rest of the list elements which are placed side by side or siblings to each other.
In this video, I'm going to introduce you some dumb properties which allow us to navigate between the
elements.
I think that for giving better explanations regarding dumb navigation would be perfect to select second
list elements.
Therefore, I'm going to assign to it I attribute.
So right here I'd list item.
Then go to cryptologist file.
I want to note that if you have an access on any HDMI element, then using some of the properties,
you are able to reach to its parent element, grandparents, child elements and siblings.
OK, let's select second list element.
Right, variable list item.
Equals documents that get element by ID.
And pass the ID at least item.
In order to access on its parent element, we can use a property parent node and I'm going to work in
council.
So write your list item dot parent node.
And you see that we've got your element using this property, we can access from least element to its
grandparent for that we can add to the list item dorper.
Note another part, note property.
So we have here development, and if you take a look on extremophile, you will find that our last element
is surrounded by you, all elements, which is its parent, and you will itself is surrounded by development
with class name no Titlist, OK, instead of A..
We can use the exact similar property, which is called parent elements.
They work in the exact same way.
So if we change parent nodes into parent elements then.
We will get again, you, aunt.
So he can use any of those properties.
All right, they also allow us to manipulate on elements, for example, we can change the background
color for you, all elements for that right to your list items or parent elements that style.
That background.
Equals to, let's say, orange.
And here we go, the background of fuel is orange.
OK, the next I'm going to use the property, which is called Child Notes.
So let's right here at least item dot child notes.
And you see that it gives us a no lists, and inside it we have all the items which are included in
the list element and also we have here text items which are called text notes.
They are actually the white spaces, which are between the elements.
So when you use child notes property, they are recognized as text notes.
If we go back to the original file and then remove these white spaces.
So we need to place all those elements on one line.
There were four text notes, therefore, we need to get rid of four white spaces.
Then reload the page and use again child notes property.
You see that we have, again, no list, but without tax notes.
All right, there is a better solution which allows us to avoid this kind of messy work.
I mean, if we use the property called children, it will ignore all these white spaces and return the
actual elements.
So.
Right list item that children.
So we have the exact same results, but there is only one difference in case of children, Prop. eight
returns, HD collection, and of course you are able to use index numbers for accessing on any element
inside them.
All right.
Let's get back to those white spaces.
And move on to another property, which is called First Child.
Reload the page and use again, list item, so right, list item, dot, first child.
And you see that again here we have a text note, this property, like child notes, recognizes the
white spaces as tax notes.
So in order to reach directly to the child element, which is a paragraph in this case, and also avoid
removing white space manually, we can use another property, which is first element child.
It works in the same way, but ignores white spaces.
So write list item dot first element child.
And you see that we've got directly paragraph, which is their first child element for at least elements.
All right, I believe that the other guest, if we have first child and first element child properties,
then Dom allows us to use a last child.
And last element, child properties.
The difference is that they grab last text note and last element from the least in this case.
OK, so we have referred how to access and parents and on child elements, the only thing that I want
to demonstrate in this lecture is how to get access on siblings so that we need to use properties like
previous sibling, previous aliment sibling, next sibling and next sibling.
So writes list item DOT.
Previous sibling.
And we have tax not so again, like child notes and first child property's previous sibling and also
next sibling properties count whitespace as a tax note.
And again, the solution is that we have to use previous element sibling.
And next on sibling instead of that, so if you write your list item, that previous element sibling.
Then you will get first at least aliments.
And in the same way, if you use next elements, sibling.
Then you will get third at least element.
OK, so I want to recommend to practice on your own using those properties, because I know that everything
seems very simple, but actually without practice, you may forget afterwards how those properties work.
See you in the next video.