DOM TREE in HTML

What is a DOM tree

We know that for every HTML code we can draw a document object model tree or DOM tree. The browser maintains a DOM tree for every HTML page the DOM tree is not only used for selecting elements in CSS it is also used in JavaScript for accessing the elements or adding behaviors to HTML elements, so understanding the DOM tree is most important. The DOM tree is drawn based on the parent-child relationship between HTML elements. I am going to discuss how to draw a DOM tree based on the parent and child relationship.

How to Create DOM tree

See the above image, the first element is a div, so when we draw the DOM tree for this sample code, we can see that the div goes to the root node and has an oval shape inside it. And the <div> element have oval with <header>, <div> and a <footer> elements and they are connected them by straight lines. The header, div, and footer are going to be children of the <div> element. If you notice carefully in the header, we have <h2>, <p> and <a> elements. You can see in the next level,<h2>, <p>, and <a> elements wrapped in an oval shape and connected by straight lines to the <header> node. <h2>, <p> and <a> are children of the header node, and this header element becomes the parent of the <h2>, <p> and <a> elements.

Similarly, the div is going to become a parent to the header div and footer elements. Now the div element has a <p> and an <a> element. In the next level The <p> and <a> elements in the oval shape and connected to the <div> element by straight lines. So these div and <a> are going to become children of this div element. Similarly in the footer element have <h2>, <p> and <a> in the oval shapes and connected by straight lines to the footer node. All these <h2>, <p> and <a> elements are going to be children of the footer.

So that is all about how do you draw a DOM tree for a given HTML code. I hope you guys have understood. Now I am going to discuss some of the important terminologies about the tree so that you get a clear idea.

Important terminologies about the DOM tree

• DOM tree is a finite set of nodes.
• Nodes in the tree are represented by an oval shape. You can see the above DOM tree diagram image each oval shape is actually known as a node. So, a tree is a set of nodes. You can say every HTML element has one node actually.
• You can see the DOM tree diagram, nodes are connected with one another by straight lines known as edges.
• The first node or the top node of the DOM tree is called the root node.
• A node with single or multiple children is called a parent node. So, the last node in the DOM tree is the parent node because they have children.
• A node containing no children is known as a leaf node. So, all the last node in the DOM tree is leaf node because they don’t have any children.

Ancestors of a node

Any node visited on the path from the selected node to the root node. (i.e. parent, grandparent, Grand grandparent, any node visited up to the root node are considered as Ancestors). For ex: When you draw a path from the selected element to the root node any element or node visited in the path from the node to the root node is considered an ancestor.

Descendents of a node

Any node falling under the selected node tree. (i.e. Direct children, children’s children, or any node that can be reachable from the selected node up to the leaf node is considered as a descendent node).

Siblings

Two are more nodes with the same parent are known as siblings (i.e brothers). In the DOM tree, <h2>, <p> and <a> all are having the same parent <div> hence, they are considered as siblings. And the <h2> and <p> are adjacent siblings because they are one beside.

I suggest you try drawing some DOM trees yourself for some example code to write and understand who our ancestors and descendants are in your DOM tree.