JavaScript — Parents, Children and Siblings
In the past several articles I’ve covered how to manipulate html elements, how to query the DOM, and much more. I’d love to cover another fundamental topic before I move on into some more complicated stuff. Lets go!
Lets talk about node relations.
Here you can see a simple node tree. A simple representation of the DOM.
Take a look at the h1, and 2 div nodes on the right side. You can see they all have the same direct parent. These nodes are sibling nodes. The p tags coming off the div node would also be siblings, while the div node would be their parent.
So these are 2 different kinds of node relations. I’m going to go over some examples of how we can traverse the DOM using these node relationships to gain access to a wider variety of elements.
Heres a simple html page. I have an article tag that has a bunch of p tags and a div inside it. Lets gain access to all the elements within this article and then assign a class to each element through JavaScript.
We already know how to do this the long way. We could make 3 separate queries to the DOM. One for the h2, one for the p tags and one for the div, but thats just writing WAY more code than we really need to in this situation. This is also limiting us when it comes down to dynamically changing elements. What if we don’t actually KNOW what the elements are that we want to retrieve?
Using the .children
property gives us an HTML collection that lists all the elements inside the article.
Like I’ve said in previous articles, you can’t use forEach
on an HTMLCollection. So how do we cycle through these elements?
I could convert the elements to an array by doing this:
Using the Array.from()
will turn this into an array for us.
Cool. This is no long an HTMLCollection so we can use forEach.
SIDE NOTE: using the Array.from() does not actually change the original value of the article.children. Its NON destructive. SO if I were to log the articleParent.children after this line, it would still return an HTMLCollection.
here I’m cycling through the array and assigning an ‘article-elemtn’ class to each child.
So this is a good use of the relationship between the article node and the nodes within it (children).
Now just to show you the other way around:
I want to find the parent of the h2, so I use the .parentElement
property.
This will log out the article.
What do you think will be output in the console with THIS line?
If you guessed the body, you are correct!
Now the sibling relationship:
This line gets the eleement next to the one you’ve queried. In this case, the h2. So I should get a p tag.
hayoooooo
This gets the sibling in the opposite direction. Since my h2 doesn’t have a previous sibling, it returns null, BUT if it did, it would return it.
So this is a pretty versitile way to traverse the DOM. With one query to the DOM, I’m able to access everything within that aricle tag.
In the next article, I’m going to cover some event basics. We’re gonna actually be interacting with a web page we develop! See ya there!