DOM Tree and Nodes

html.Srijan

In the last article - Introduction to DOM, we saw how a DOM tree is constructed by the browser for further processing of the web page. In this article, we will discuss some common node types that are present in almost all HTML documents and also look into their associated properties.

DOM Nodes

A tree is constructed from nodes. There are 12 node types available for the construction of a DOM Tree. DOM nodes are implemented as an object with their properties and methods. Four frequently used node types which are present in almost all HTML documents are:

  • document node
  • element node
  • text node
  • comment node
  • Document Node

Document Node

Document Node is the root of DOM Tree. It represents the entire document that is loaded in the browser window. It is the entry point to the document. We can access all nodes in the DOM tree from the document node.

DOM TREE TOP

Top level nodes in a document (html, head, body) can be directly accessed using properties of document node:

  • document.documentElement - <html>
  • document.head - <head>
  • document.body - <body>

Example

html:

<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1>
      Output:
    </h1>
    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="op1">
        document.documentElement :
      </p>
      <p id="op2">
        document.head :
      </p>
      <p id="op3">
        document.body :
      </p>
    </div>
  </body>

</html>

javascript:

var htmlElement = document.documentElement.tagName;
var headElement = document.head.tagName;
var bodyElement = document.body.tagName;

//Getting reference of elements where output will be shown.
var htmlOp = document.getElementById('op1');
var headOp = document.getElementById('op2');
var bodyOp = document.getElementById('op3');

//Appending output
htmlOp.innerHTML = htmlOp.innerHTML + htmlElement;
headOp.innerHTML = headOp.innerHTML + headElement;
bodyOp.innerHTML = bodyOp.innerHTML + bodyElement;

We used Node.tagName property in the above example which returned the name of the selected node.

Element Node

HTML tags become element nodes in the DOM tree. We can get node type by using Node.nodeType property. Node.nodeType returns a numeric value corresponding to the type of node. Below table shows numeric value and node type they represent:

ValueConstants
1Node.ELEMENT_NODE
9Node.DOCUMENT_NODE
3Node.TEXT_NODE
8Node.COMMENT_NODE

Example

html:

<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    </h1>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>

javascript:

var heading_node = document.getElementById('heading');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = heading_node.nodeType;

As shown in above example, Node.nodeType returned "1" for h1 element showing that h1 is of type element node.

Text Node

TEXT NODE

A text node is always a leaf of the DOM tree. An HTML element consists of an element node and a text node in general.


html:

<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <h1 id="heading">
      Welcome to hackinbits.com
    </h1>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>

javascript:

var heading_node = document.getElementById('heading');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = heading_node.childNodes[0].nodeValue +
  ": " + heading_node.childNodes[0].nodeName;

In the above example, we used the following new properties:

PropertyDescription
Node.nodeNameReturns name of the current node as a string. For a text node, it will return "#text".
Node.nodeValueReturns or sets the value of the current node. For text node and comment node, it will return the content. For document and element node it will return null.
Node.childNodesReturns a live NodeList of child nodes of the given element. Particular Children can be selected by specifying an index that starts at '0' for the first element. Nodelist is a collection of nodes and "live" here means that NodeList will reflect any changes in DOM instantly.

Comment Node

HTML comments are represented by comment nodes in a DOM tree. Comment node can also be accessed using javascript.


html:

<!DOCTYPE HTML>
<html>

  <head>
    <title>DOM | Hackinbits</title>
  </head>

  <body>
    <p id="para"><!--Comment for demonstration-->A comment containing text "Comment for demonstration" is inserted just before this text node in a paragraph element. </p>
    <hr>
    <h2>
      Output:
    </h2>

    <div style="border:3px grey solid;padding:5px; border-radius:3px">
      <p id="output">

      </p>
    </div>
  </body>

</html>

javascript:

var paragraph_node = document.getElementById('para');

//showing output
var out_p = document.getElementById("output");
out_p.innerHTML = 
"Comment Content: \""+ paragraph_node.childNodes[0].nodeValue + "\"<br>"+
  "Node Name: "    + paragraph_node.childNodes[0].nodeName + "<br>"+
  "Node Type: "    + paragraph_node.childNodes[0].nodeType;
  // At '0' index comment node is present and at '1' text node.

In next article we will discuss different types of relationship between DOM nodes.

Useful Resources

Share and support us

Share on social media and help us reach more people