Display HTML elements

FOCUS:

Our aim is to display the number of HTML elements present in an HTML document that has an id associated with them. This must be done on click of the command button named cmdDisplayElements.

HTML code snippet

 
<div id="main" class="main">
  <p>Welcome to my web site</p>
  <p>We sell all the widgets you need.</p>
</div>
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input type="button" id="cmdDisplayElements" 
      name="cmdDisplayElements"
      value="Display HTML elements" 
      onclick="displayelements();" />
    </td> 
  </tr>
</table>

Javascript code snippet

 
<script type="text/javascript">
  function displayelements()
  {
    var elements = "";
    elements = document.getElementsByTagName("body")[0].childNodes;
    for(i=0; i<elements.length; i++)
    {
      if(elements[i].nodeType == 1 && elements[i].id) 
      alert(elements[i].id);
    }
  }
</script>

How the HTML elements are counted and displayed :

When the command button whose id is cmdDisplayElements is clicked a user defined Javascript method displayelements(); is invoked.

When displayelements(); is invoked a built in Javascript method getElementsByTagName() is passed the name HTML tag body.

Hence the variable elements will hold the handle to the HTML page, BODY collection, which actually is a collection of all the elements on the HTML page.

Additionally, starting from position zero all child nodes are counted.

 
  elements = document.getElementsByTagName("body")[0].childNodes;

Hence the variable elements will hold an array which is a collection of all the HTML elements present of the page.

Next a for loop is runs. The number of times that the for loop executes is determined by the number of entries in elements array.

 
  for(i=0; i<elements.length; i++)

As the for loop runs the element type is checked for each entry in the elements array. If the elements nodeType is 1 and if the element has an id and alert pops up and the elements id is displayed.

 
  if(elements[i].nodeType == 1 && elements[i].id) alert(elements[i].id);

This technique checks how many child elements are there in parent element.

Only if an element’s nodeType is 1 and the element has an id does the function codespec display the element’s id on an alert.

NOTE: The nodeType constant can carry values value ranging from 1 to 12. nodeType==1 means that this an ELEMENT_NODE has been identified.

The Complete Code

 
<html>
<head>
  <title>Second HTML DOM Example</title>
  <script type="text/javascript">
    function displayelements()
    {
      var elements = "";
      elements = document.getElementsByTagName("body")[0].childNodes;
      for(i=0;i<elements.length;i++)
      {
        if(elements[i].nodeType == 1 && elements[i].id) 
        alert(elements[i].id);
      }
    }
  </script>
</head>
 
<body>
  <div id="main" class="main">
    <p>Welcome to my web site</p>
    <p>We sell all the widgets you need.</p>
  </div>
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <input type="button" id="cmdDisplayElements" 
        name="cmdDisplayElements" 
        value="Display HTML elements" 
        onclick="displayelements();" />
      </td>
    </tr>
  </table>
</body>
</html>