DEV Community

loading...

Beginner JavaScript - 13 - Understanding DOM Traversal

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
Updated on ・2 min read

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 :

Alt Text

"" 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 :

Alt Text

  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

Alt Text
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 :

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

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

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

Discussion (0)