Understanding DOM Tree structure



For any HTML code we can draw a Document Object Model tree (DOM tree).
DOM tree is drawn based on the parent and child relationship present between html elements.

A tree is a finite set of nodes.
Nodes in the tree are represented by oval shape.
Nodes are connected with one another by straight lines known as edges.

First node or top most node in the tree is known as root node.
A node containing single child or multiple children is known as parent node.
A node containing no children is known as leaf node.

Ancestors of a node are any node visited in 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)

Descendents of a node are 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 descendent node)

Two or more nodes with same parent are known as siblings (i.e. brothers)

Interview Questions: