Beginner JavaScript - 13 - Understanding DOM Traversal

Hey everyone ,

In this article, let us cover a detailed introduction on Document Object Model (DOM) in JavaScript. This is the thirteenth part of my Beginner JavaScript Series on Dev.

DOM Traversal - A complete picture

In DOM Traversal, a concept of Node Relationships comes into picture. So let us understand this in great depth first. But before that we need to understand one thing :

"" Everything in an HTML Document is considered as a Node. ""

The nodes that are present in the DOM Tree possess a hierarchical relationship to each other.
There are certain terms that we can use to describe or give a name to these relationships - like parent, child, sibling.

Now there are a couple of things that you need to commit to the mind :

1. The first and foremost thing that you need to remember is that in a DOM tree that gets generated, the top node is called as the root node of the tree.
2. Every node has exactly one parent, except the root node which has no parent.
3. The terms parent, child, and sibling are used to describe the relationships.
4. A node can have any number of children
5. Sibling nodes are those nodes that have the same parent.

Traversing up the DOM Tree, along a Level and down the DOM Tree

The properties that are used for DOM Traversal are demonstrated in my video Exercise : DOM Traversal along levels, here is the link for the video if you want to check it out.

So this is it for this one. I do have videos for these so if you like to watch instead of reading, definitely check them out.

If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

(2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

The Nerdy Dev Apr 28 2 min read

#html #css #node #javascript

Looking to learn React.js with one Full Project, check this out :

Learn React with one BIG Project [NOTES included] - Demo and Video Link

The Nerdy Dev Jun 10 1 min read

#100daysofcode #javascript #react #webdev

Follow me on Twitter : https://twitter.com/The_Nerdy_Dev

Check out my YouTube Channel : https://youtube.com/thenerdydev