HTML DOM Node Trees

The HTML DOM Node Trees
The HTML DOM views an HTML document as a tree-structure. The tree structure is called a node-tree. All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created. The node tree below starts at the root node and branches out to the text nodes at the lowest level of the tree: 

 <html>
  <head><title>
    My title
  </title></head>
  <body>
   <a href="">
    My link
   </a>
   <h1>
    My header
   </h1> 
  </body>
 </html>

Node Parents, Children, and Siblings
The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings.

  • In a node tree, the top node is called the root.
  • Every node, except the root, has exactly one parent node.
  • A node can have any number of children.
  • A leaf is a node without children.
  • Siblings are nodes with the same parent.


Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.