HTML DOM getElementsByTagName() Method

The getElementsByTagName() method returns a collection of an element's child elements, specified by tag name, as a NodeList object. The nodes at Nodelist can be accessed by index numbers. The syntax of getElementsByTagName() is :
  element.getElementsByTagName(tagname)
Now let see an Example :
<html>
<body>
  <p>This is Paragraph One</p>
  <p>This is Paragraph Two</p>
  <p>This is Paragraph Three</p>
  <ul id="list">
    <li><a href="link1.html">First Link</li></a>
    <li><a href="link2.html">Second Link</li></a>
    <li><a href="link3.html">Third Link</li></a>
    <li><a href="link4.html">Fourth Link</li></a>
  </ul>

  <div id="div1"></div>

  <script>
    myfunc('p');
    myfunc('li');

    function myfunc(elem) {
      var length = document.getElementsByTagName(elem).length;
      var text = "Number of <" + elem + "> Elements : " + length + "Contents :";
      for(var x = 0; x < length; x++) {
        text += document.getElementsByTagName(elem)[x].innerText;
      }
      document.getElementById('div1').innerHTML += text;
    }
  </script>
</body>
</html>
Output :

Number of <p> Elements : 3
Contents :
This is Paragraph One
This is Paragraph Two
This is Paragraph Three


Number of <li> Elements : 4
Contents :
First Link
Second Link
Third Link
Fourth Link

At the above example
  document.getElementsByTagName(elem).length
The above line will get the length or the total number of elements, where the elem is nothing but the <P> and <li> element. And the below code
  document.getElementsByTagName(elem)[x].innerText
will get the innerText of the element, where the value of x is 0, 1, 2, 3,..

Next Topic :