So we've seen how to query the Dom for different elements and then how to do some basic manipulation
with those elements, whether that's changing the HTML, the text inside them, the styles or the classes,
etcetera.
So now I'd like to introduce you to the idea of node relations.
And by that I mean relationships between different nodes or different elements in a node tree like this.
So remember, a node tree is the visual representation of the Dom and it represents our HTML page.
So on here we have all of these different elements.
Now, one type of relationship between different nodes or elements on a tree is the sibling relationship.
So where we have elements on the same level with the same direct parent, they are known as siblings.
So these would all be siblings with the body parent and these would be siblings with the div parent.
So that's one type of relationship.
Now another type of relationship is the parent child relationship.
And in this case we'd have a parent such as a div with children nodes these P tags.
So these are two different kinds of relationships and we're going to use these now to traverse the Dom
between different elements and get bigger selections of elements.
So I've just edited the HTML page now so that we have some new content and it's just an article tag.
And inside the article tag several different elements.
We have an H2, £0.03 tags and then a div tag at the bottom.
Now imagine at some point what we wanted to do is make a selection of all of the elements inside the
article and then apply a class to each separate element.
How would we do this?
How would we make that selection, first of all?
Well, I guess what we could do is make a separate selection for each tag.
We could say, first of all, we want the article H2 and we'll store that in a constant.
Then we want the article tags.
We'll store those in a constant.
Then we want the article div tag so we could do that three separate queries, but we're writing much
more code than we actually need to do here.
And also it might be that we don't necessarily always know the tags that are inside the article.
These could be dynamically generated by a content management system or something like that.
So in our JavaScript we might not know to make a selection for an H2 or P tags or a div tag.
So how do we combat these two problems?
Well, what we can do is make a query for this article.
Then we have a reference to that.
Then we can use the children property to go out and give us all of the children in a single collection.
So let's see that in action.
First of all, we need a reference to the parent.
So const article is equal to document dot query selector and we want the article.
So now we have a reference to the article and we can get the children from the article.
All of these things right here by just using the children property.
So I'm going to log this to the console console dot log, article dot children.
Okay.
So if I save this and preview in a browser, we can see all of these five elements now inside this one
HTML collection.
So that's cool.
We've got them all now.
However, we still have a problem.
Remember I said that we cannot use for each on an HTML collection we can use for each on a node list
when we use the query selector all.
And we can also use a for each on an array.
But this is neither of those.
This is an HTML collection and we can't use for each on this.
So how do we actually cycle through all of these elements?
Well, what we could do is take this and convert it into an array, first of all.
Then when we have that, we can use for each on it.
So how do we take an HTML collection and turn it into an array?
Pretty simply, we take the array object, first of all built into JavaScript and we're going to talk
more about this later on.
When we talk about object oriented programming, then we use a method on that called from and then we
pass in what we want to make an array from.
Well, we want to make an array from this thing right here.
So let's pass it in there like, so now I'm going to log this to the console.
So I'll say console dot log and pass this in.
And hopefully now we should see an array based on this thing right here, Save it and preview.
And now we can see this is no longer an HTML collection.
It is an array we can see right there.
Array.
Okay.
So now we can use for each on this.
Now, I just want to mention that this thing right here, this is not destructive.
This actually returns a new value.
And if I log out again article dot children so console dot log article dot children this is still going
to be an HTML collection.
Okay.
So it doesn't alter the original value of this thing.
All it does is return a new value, which is an array based on this thing.
So now we know how to do that.
Let's use that.
So I'm going to come down here and I'm going to say array dot from and then pass in article dot children
and then we have that array so we can use for each on that value.
Because remember this returns an array.
So this is an array now and we can use for each on that.
Now we pass a callback function into this.
So let's just do a simple arrow function.
First of all, with no parameters like this.
Now remember when we use for each and we cycle through an array we take in as a parameter each individual
item into this callback function.
Because each time we fire it, we have access to the item we're iterating.
So I'm going to call that item a child.
So we're cycling through the children and grabbing each child.
Then we can perform some code for each one.
So since we only have one parameter right here, I'm going to take away the parentheses, which we can
do in an arrow function.
Okay, So inside this function, what do we actually want to do?
Well, we're going to take the child element and we're going to access the class list.
Then we're going to add a class.
So for each child we're adding a class.
And the class I want to add is called Article Elements.
So hopefully this will say.
Through this array, all of those children.
And for each item in the array, it's going to add this class.
So if we save it now, preview this in a browser, go to elements and open up the article.
We can see every article inside now has this class.
Now it doesn't matter what elements are inside here, it could be div tags, image tags, tags, H2
tags, H1 tags, etcetera.
Doesn't matter because we're grabbing them all by saying article dot children.
So that's a good use of this relationship to get all of the elements inside a parent.
Okay, so that's the parent child relationship.
Now I want to show you this the other way around.
So I'm going to comment this out and I'm going to come down here and this time I'm going to say const
title is equal to document dot query selector.
And then inside we want the H2.
So this is going to grab this thing for me right here.
Now what I want to do is find out this element's parent so I can do that.
I can come down here and say console, dot log title, which is the thing we just grabbed and then use
a property called Parent Elements.
So like before we use children, now we're using parent element to find the parent.
So let's have a look at this, save it and come to the console.
And now we can see we get the article, which is the parent of the H2.
Now we can chain these things together.
So I could come down here and say parent element, and that gets us the article.
And then I could chain on another parent element to go further up the node tree.
And this is going to get me the parent of the article, which should be the body, right?
Because that's the direct parent of the article.
So if we save it and preview, we can see now we get the body.
So that's nice.
We can chain these things together.
So if we know how to make a selection for a certain element and want to find the path to all of its
different parents, we can do that here.
And there will be cases when you sometimes need this, when you don't know what the parent element necessarily
is, so you do it via one of the children elements.
So now we've seen that.
Let's look at the sibling relationship.
So I'm going to console dot log again the title and I want to get whatever's next to it.
So whatever this element is right here so I can say to do that title dot next element sibling.
And if I save this, it should get me the P tag, which it does the next element next to the H2 right
here.
So what if I want the previous sibling?
Well, I can do something very similar.
I'm going to come down here and say instead of next title dot previous, oops, spell that correctly
and save it.
And now we can see we get null and we get null.
Because if we go to the HTML, it doesn't have a previous sibling.
But if I add a new P tag in here and call it new sibling and save that, if we view this again now,
we get this element right here.
So if it doesn't exist when we try to do something like this, then we get null.
Now I just want to take this thing one step further to show you a bit more chaining.
So let me do this.
I'm going to now say console, dot log.
And first of all, I'm going to get the title.
Then I'm going to get the next element sibling.
And after that I'm going to get its parent element so we can chain all of these together.
Then I'm going to get the children.
Now this is long and convoluted and you might never need to do this.
There might be one extreme case in the course of a few years when you might need to do something like
this.
But I want to show you that it is possible we can use all of these different properties to traverse
the Dom and get selections of things.
So if I save this, we can see now we get this HTML collection once again because we start with the
title, we get the next element sibling, which is the P tag.
Then we get the parent element, which is the article.
And finally we get the children, which is all the elements inside the article tag.
So there we go.
My friends, that is node relations.
We can traverse between siblings, parents and children and sometimes this will help you to get selections
you wouldn't ordinarily be able to make just with one query selector.
