HTML - DOM getElementsByTagName() Method

Quiz

The HTML DOM getElementsByTagName() method is a read-only method used to retrieve a live HTMLCollection of all elements in the document with the specified tag name. If the specified tag does not exist in the document, it returns an empty HTMLCollection, not null.

If you pass an asterisk (*) as a parameter to this method, it will select all elements in the document and return an HTMLCollection containing all those elements.

The following interactive example demonstrate the usage of the getElementsByTagName() method for different scenarios −

DOM getElementsByTagName() Method

Welcome to Tutorialspoint

You are at the right place to learn.... Visit for more

If you click the "Change Content" button, it will change the content of the first paragraph to "Content changed to Tutorialspoint".
If you click the "Add Style" button, it will apply styles to the second paragraph, changing the background color to "white" and the text color to "green".

Syntax

Following is the syntax of the HTML DOM getElementsByTagName() method −

document.getElementsByTagName(tagname);

Parameters

This method accepts a single parameter as listed below −

Parameter	Description
tagname	It represents the name of an element we want to retrieve.

Return Value

It returns the HTMLCollection of found elements by the tagname specified.

Example 1

The following program demonstrates the usage of the HTML DOM getElementsByTagName() method −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
       padding: 8px 20px;
   }
   span{
       position: relative;
       top: 10px;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to add style to the "span" element.</p>
<button onclick="fun()">Click me</button>
<br>
<span id="type">You are at the right place to learn.</span>
<script>
   function fun() {
      let x = document.getElementsByTagName("span");
      x[0].innerHTML = "Welcome to Tutorials Point..";
      x[0].style.color = "white";
      x[0].style.backgroundColor = "#04af2f";
   }
</script>
</body>
</html>

The above program displays a "span" element with some styling −

Example 2: Change the Background color of Document

In this example, we will change the background color of the HTML document using the HTML DOM getElementsByTagName() method along with the "style" property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
       padding: 8px 20px;
   }
</style>
</head>
<body>
<span id="type">You are at the right place to learn.</span>
<p>You can go through our Tutorials.</p>
<p>Click on the below button to change background-color of HTML Document</p>
<button onclick="fun()">Click me</button>
<br>
<script>
   function fun() {
      let x = document.getElementsByTagName("body");
      x[0].style.backgroundColor = "#04af2f";
      x[0].style.color = "white";
   }
</script>
</body>
</html>

Once the program is executed, a button will be displayed. When clicked, the background color of the document will change to "green" −

Example 3: Get a List of all Tags

In the following example, we use the HTML DOM getElementsByTagName() method to retrieve all the elements by passing asterisk ("*") as a parameter and loop through it to display a list of all elements used in the HTML document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
      padding: 8px 20px;
   }
</style>
</head>
<body>
<p>Click on the below button to get the list of all the Element used in this document:</p>
<button onclick="fun()">Click me</button>
<p id="list"></p>
<script>
   function fun() {
      let x = document.getElementsByTagName("*");
      let text = "";
      for (let i = 0; i < x.length; i++) {
         text += x[i].tagName + "<br>";
      }
      document.getElementById("list").innerHTML = "List of all element: <br>" + text;
   }
</script>
</body>
</html>

On executing the above program, the list of all Elements will be displayed −

Example 4: Change the Content of Element

In this example we will change the written text inside element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
<style>
   button{
      padding: 8px 20px;
   }
</style>
</head>
<body>
<span id="type"> You are at the right place to learn.</span>
<p>Click the below button to change the content of the first paragraph (first p).</p>
<button onclick="fun()">Click me</button><br>
<p>I am Paragraph 1.</p>
<p>I am Paragraph 2.</p>
<script>
   function fun() {
      let x = document.getElementsByTagName("p");
      x[0].innerHTML = "Welcome to Tutorials Point..";
   }
</script>
</body>
</html>

After executing the program, a button will appear. Clicking the button will change the content of a "p" element to "Welcome to Tutorials Point" −

Example 5: Get the Number of Elements

The following example returns the number of elements in the document −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByTagName() Method</title>
</head>
<body>
<span id="type"> You are at the right place to learn.</span>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p id="num"></p>
<script>
   function fun() {
       let x = document.getElementsByTagName("p").length;
       document.getElementById("num").innerHTML = "Total 'p' Elements: " + x;
   }
   fun();
</script>
</body>
</html>