JavaScript document.getElementsByTagName()

The JavaScript getElementsByTagName() method returns all elements with the specified tag names. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <h2>getElementsByTagName()</h2>
   <p>This is para one</p>
   <p>This is para two</p>

   <h2>The getElementsByTagName() Method</h2>
   <p>This is para three</p>
   <p>This is para four</p>
   
   <script>
      var ec = document.getElementsByTagName("h2");
      for(var i=0; i<ec.length; i++)
      {
         ec[i].style.backgroundColor = "purple";
         ec[i].style.padding = "12px";
         ec[i].style.color = "white";
      }

      var ec = document.getElementsByTagName("p");
      for(var i=0; i<ec.length; i++)
      {
         ec[i].style.color = "red";
      }
   </script>
   
</body>
</html>
Output

getElementsByTagName()

This is para one

This is para two

The getElementsByTagName() Method

This is para three

This is para four

In above example, the following statement:

var ec = document.getElementsByTagName("h2");

returns all H2 elements and initialized to the ec variable as a collection. And next, using the for loop, I've applied some styles to all H2 elements, one by one. The same process applied to all P (paragraph) elements.

JavaScript getElementsByTagName() syntax

The syntax of the getElementsByTagName() method in JavaScript is:

document.getElementsByTagName(tag)

Note: The document.getElementsByTagName("*") method returns a collection of all elements available in the current HTML document.

JavaScript getElementsByTagName() example

To get the collection of all elements with the specified tag name available inside the specified element, proceed in this way:

element.getElementsByTagName(tag)

where element refers to the element (parent element) inside which all elements with the specified tag name will be returned. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>This is para one</p>
   <div id="myDiv">
      <p>This is para two</p>
      <p>This is para three</p>
   </div>
   <p>This is para four</p>
   
   <script>
      var element = document.getElementById("myDiv");
      var ec = element.getElementsByTagName("p");
      for(var i=0; i<ec.length; i++)
         ec[i].style.color = "red";
   </script>
   
</body>
</html>
Output

This is para one

This is para two

This is para three

This is para four

Several paragraphs are defined in the HTML document in preceding example, including two paragraphs within a div element with the id attribute "myDiv." Using the document.getElementById() method, the JavaScript code obtains a reference to the div element with the id "myDiv" and stores it in the "element" variable.

The code then calls the "element" variable's getElementsByTagName() method to retrieve all of the p elements contained within the div element. This method produces an HTMLCollection object that contains all of the p elements. The code then uses a for loop to loop through each element in the HTMLCollection, setting the color CSS property to "red" for each p element. This turns the text in each paragraph within the div element red.

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!