Explore JavaScript DOM Traversal. There are many ways for JavaScript DOM… | by V...
source link: https://blog.bitsrc.io/explore-javascript-dom-traversal-96352ec3bcf8
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Explore JavaScript DOM Traversal
There are many ways for JavaScript DOM traversal. Let’s find out how to traverse using parent, child, and sibling nodes.
As you all know the JavaScript DOM is a tree data structure of nodes. If you have been in frontend development for a while, I’m sure you are aware of the methods you can use to access DOM elements. Just to recap, here are some of the methods that we use to refer to DOM nodes.
- getElementsByTagName()
- getElementsByClassName()
- getElementById()
- querySelector()
- querySelectorAll()
These are the ways to select HTML elements within your DOM using JavaScript. However, it might be cumbersome to access each and every element in the DOM by referring to it using a class name or an id.
In this article, we will look at a different DOM traversal method, which gives you access to all DOM nodes in a much more connected way.
We will be using parent, child, and sibling properties to traverse the DOM.
For ease of explanation, I will be creating a sample project with one HTML file with few DOM nodes. The HTML file will look as follows.
The output of the above when run on the browser would look as follows. Have a thorough look at this in order to understand the rest of this article.
I have created few variables in the <script> tag in order to access the 3 elements in the DOM tree; the h1 element, the p element and the ul element.
Now that we’ve set up the project, let’s explore DOM traversal.
Root Node
The Root Node is the start of the DOM tree. This is basically the document . This object is a property of window. Even if a blank HTML is loaded, it will have a root node and root elements. They are as follows.
Now let’s explore the rest of the nodes.
The nodes in the DOM tree are referred to as parents, children, and siblings based on their relationships. This is no different than a real-world family tree. Hence this concept will be more familiar and relatable to you.
Parents Nodes
A parent of a particular node is the node directly above it in the DOM tree. The parent node of a node will be closer to the Document in the hierarchy than it is.
In our example,
<html>is the parent node of<head>,<body>and<script>.<body>is the parent of<h1>,<h2>,<p>and<ul>,
But <body> is not the parent of <li>, since it is two levels down from body.
If we want to traverse to the parent of a node, the following DOM traversal method can be used.
<currentNode>.parentNode;
Instead of parentNode , parentElement can also be used to retrieve the parent element node.
It gets more interesting. Let’s say you need to retrieve the grandparent of the current node, which is two levels above, the same mechanism can be used for this too.
<currentNode>.parentNode.parentNode;
Using the parentNode twice, we can retrieve the grandparent of <p> which is <html> .
Note: The parent element of <html> is the document itself. Therefore if you try to retrieve the parent of HTML, it will return null. However, the parent node of <html> will return as #document .
Tip: Share your reusable components between projects using Bit (Github).
Bit makes it simple to share, document, and reuse independent components between projects. Use it to maximize code reuse, keep a consistent design, speed-up delivery, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Children Nodes
Nodes that are one level below the current node are considered its children nodes. There are many properties of child nodes that can be accessed.
Let’s try to retrieve the child nodes of the list (<ul> ) we have in our example.
The list has 11 children. Since this is a manually generated HTML, it considers the indentation (white space) as a separate child. Hence, there are 11 child nodes.
Let’s try to modify some styles using this DOM traversal mechanism.
I will use this method to color the background in yellow of the first child of the list.
list.firstChild.style.background = 'yellow';
As you can see here, in order to change a styling property you will have to use firstElementChild instead of firstChild . This is because firstChild returns text because of indentation. In order to get the first <li> , firstElementChild needs to be used.
We can even combine loops with this DOM traversal method to alter certain properties.
Sibling Nodes
With the use of parent and child nodes, you will be able to traverse the entire DOM. In addition to this, sibling nodes are also very interesting to explore. Sibling nodes are nodes that are at the same level in the DOM tree. It can be the same type of element or even different types of elements.
This has a few properties as well.
Here is an example where sibling nodes are used to traverse the DOM and access text elements.
Similar to parent and child node elements, sibling properties can be chained together as well.
Conclusion
DOM traversal is very fascinating if you know the correct and efficient way to do it. In this article we explored one way of traversing the DOM, mainly using parent, child, and sibling nodes. Now that you know this concept, the possibilities are endless.
Hope the information in this article will become handy to you in your project implementations in order to traverse the DOM efficiently.
Thanks for reading.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK