HTML | DOM getElementsByTagName() Method

The getElementsByTagName() method in HTML returns the collection of all the elements in the document with the given tag name. To extract any info just iterate through all the elements using the length property.

Syntax:

var elements = document.getElementsByTagName(name);

Where:

  • elements is a collection of all the found elements in the order they appear with the given tag name.
  • name is a string representing the name of the elements. The special string “*” represents all elements.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>DOM getElementsByTagName() Method</title>
    </head>
    <body style = "text-align: center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
          
        <h2 >
            DOM getElementsByTagName() 
        </h2>
          
        <p>A computer science portal for geeks.</p>
  
        <button onclick="geek()">Try it</button>
        <script>
        function geek() {
          var doc = document.getElementsByTagName("p");
          doc[0].style.background = "green";
          doc[0].style.color = "white";
        }
        </script>
  
    </body>
</html>

chevron_right


Output:
Before click on button:
tagname
After click on button:
tagname

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>DOM getElementsByTagName() Method</title>
    </head>
    <body style = "text-align: center">
  
        <h2 style = "color: green;">
            DOM getElementsByTagName() 
        </h2>
          
        <p>This is the first paragraph.</p>
          
        <p>This is the second paragraph.</p>
          
        <p>This is the third paragraph.</p>
          
        <button onclick="geek()">Try it</button>
          
        <script>
        function geek() {
          var doc = document.getElementsByTagName("P");
          var i;
          for (i = 0; i < doc.length; i++) {
            doc[i].style.backgroundColor = "green";
            doc[i].style.color = "white";
          }
        }
        </script>
  
    </body>
</html>

chevron_right


Output:
Before click on button:
tagname
After click on button:
tagname

Supported Browsers: The browser supported by getElementsByTagName() method are listed below:

  • Google Chrome 1.0
  • Internet Explorer 6.0
  • Firefox 3.0
  • Opera 9.5
  • Safari 3.0


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.