In this lesson, we're going to be reviewing the relationships between elements, so looking at element
children, element siblings and then element parents and how we can traverse through the different element
and before between the dormitory in order to select multiple elements and different elements.
In regards to their relationship to other elements, so we know that JavaScript has children and within
the parent node Property Children is a read-only property that returns Alive Live HTML collection,
which contains all the child elements of a node upon which it is called so HTML collection versus node
list.
So node list.
They both have length.
So you can see that when we select the child nodes, this is a node list.
When we do element children, this is an HTML collection.
So there is a difference between the two.
There's more information between children that they have an example at the Mozilla Developer Network
so we can select an element and we can loop through iterate through all their children using typical
for loop.
Let's make a selection of one of the elements on the page will select this one, which is a div with
a class of first.
So it's got a lot of siblings, it's got a parent and it's got some children that are contained within
it.
So first, selecting our element using document query selector and we're selecting the div with a class
of first three using a CSR style selector and then we can consult directory the element into the console
so we can take a closer look at what's available.
So this is the element that we've selected.
So that is referring to this first one here.
As we look through the element, there's a lot of information that's being returned, of course, and
we've got child nodes where there's 15 of them and there's children where there's only seven of those.
And so the children are all referring to the different elements that are contained within that particular
element, that particular parent that we've selected and the child nodes include everything.
So it includes all of the text.
It includes all of the spaces between them, spaces between them.
Within the HTML document, you're going to see that we get quite a bit less.
So all of these are the spaces that are being included in that node list.
And if we go through and delete the out refresh and go back into the list, you can see now the node
list only has ten and we've got reduced significantly some of the spaces that were available there.
We can also output that element, see the information, taking the elements, selecting the children
of that element.
You can list out the HTML collection by selecting the children.
And then if you want to see the child nodes, you can select the out by the child node election as well
as the node list have length values.
So that means that you can use a for loop to loop through them.
So how about we open up our editor and I'll show you how we can add and loop through all of the elements
that are available, all of the children that are available within the element.
So setting up a for loop and then looping while children length because we've got that length value
within that object, incrementing it by one and console log.
And then we just have to provide the I value and we can also get the text content so we can select those
elements that are contained within the parent within this format.
And we can see the information of each element as we iterate through.
So let's do the same thing for the child nodes as well.
So update this to child nodes node and there is going to be a difference between the two and there are
different reasons why you would use one or the other one.
So when we refresh, you can see for the most part, when we loop through, it's going to look the same.
And also notice as well that as we're looping through so we get some more spaces with the child nodes.
That's because it's including, of course, the spacing that we had and using for each to loop through
each one of the items within the list, get a function and we can get its value back as an element.
And for now, we'll just cancel log with element.
So we see that for each is not a function for children, but you are able to use it with child nodes.
So that's one of the differences between the two that you are able to do a for each with the child nodes.
And as you can see, that they do get listed out there.
So we do get all of those element values.
So I know we've got quite a few going on here, but it is listing them out afterwards so that one worked
and the children only works with the for loop.
So keep that in mind.
We can also navigate up.
So once we've got the element we can traverse through.
So not only the children, we can also get some parent information.
So we've got parent element, we also have the parent node.
And in this case it's the same thing.
So the only parent for that particular element is the body.
And that's the one, of course, that contains the element that we're looking at.
We're also able to see siblings, so we're able to see next element sibling so we can see the next element.
That's in line to our element that we're looking at is this paragraph, so we look at our HTML, this
is the element that we selected.
The next sibling is first.
So that's being represented here in the list.
Next sibling.
So that's going to be slightly different where it's returning back that text spacing there.
So there's it's a different type.
So there's just a written character there.
That is the next one between the two.
And that's this space here, because remember, this is an.
Just looking at that element, siblings, so this is again looking at the nodes as opposed to looking
at the four elements that next element sibling is looking at.
So even though they sound the same, there are subtle differences between them as to what value is going
to be returning back in the same thing with previous elements, siblings.
So it works the same way.
And then there's previous sibling is just going to be that text space again, because this one here
also has a return that's available.
And if there was no return, there's no spacing in your HTML, then you're simply going to get back
whatever the next node is.
And that would be the diff.
So now it's time for a challenge to select some elements, navigate to their siblings and output the
element into the console.
So we've got the default that we were looking at and you can use the various methods that we've seen
in order to navigate and output content.
Also loop out the contents of their children.
You can output the text content, as we did try to for yourself, and you could be ready to move on
to the next lesson.