HTML - DOM Element getElementsByTagName() Method

Quiz

HTML DOM element getElementsByTagName() method retrieves a live HTMLCollection of elements that match a specified tag name. It returns an HTMLCollection of elements that match the specified tag name.

The tag name "*" returns all child elements.

Syntax

element.getElementsByTagName(tagname)

Parameters

Parameters	Description
tagname	A string specifying the tag name of the elements to be retrieved.

Return Values

Return a HTMLCollection object that contains collection of elements with the specified tag name.

Examples of HTML DOM Element getElementsByTagName() Method

Below are practical examples showcasing how getElementsByTagName() in JavaScript selects and manipulates elements by their tag name on a webpage.

Changing Text Color of Paragraphs

This example uses getElementsByTagName('p') to select all <p> elements in the document and changes their text color on every click to the paragraph using Javascript.

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Change Paragraph Color on Click</title>
  <style>
    p {
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="instructions">
    Click any paragraph to change its color:
  </div>
  <p>Click me to change color</p>
  <p>Click me to change color</p>
  <p>Click me to change color</p>
  
  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      const paragraphs = 
      document.getElementsByTagName('p');
      for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].addEventListener('click',function()
        {
          const colors = ['red', 'blue'];
          const color = 
          colors
          [Math.floor(Math.random() * colors.length)];
          this.style.color = color;
        });
      }
    });
  </script>
</body>

</html>

Changing Background Color of Div Elements

This example selects all <div> tags and dynamically manipulates them, changing their background color on every click.

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    Change Div Background Color
  </title>
</head>

<body>
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <button onclick=
  "changeColor()">Change Color</button>
  
  <script>
    // Array of colors to cycle through
    const colors = 
    ['lightblue', 'lightgreen','lightpink'];

    function changeColor() {
      const divs = document.getElementsByTagName('div');
      for (let i = 0; i < divs.length; i++) {
      // Assign a color from the array based on the index
        divs[i].style.backgroundColor = 
        colors[i % colors.length];
      }
    }
  </script>
</body>

</html>

Dynamically Updating Content

Here, getElementsByTagName('span') selects all <span> elements on the HTML page. Each <span> element's text content is updated dynamically when clicked by adding an event listener to it.

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>
    Dynamically Updating Content
  </title>
  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      const spans = 
      document.getElementsByTagName('span');
      for (let i = 0; i < spans.length; i++) 
      {
        spans[i].addEventListener
        ('click', function() {
          this.textContent = 'Clicked!';
        });
      }
    });
  </script>
</head>

<body>
  <p>Hit the Span!</p>
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</body>

</html>

Dynamically Update List Items

This example shows how to dynamically update the content within HTML when a user clicks the button to update the displayed list items using the getElementsByTagName() method.

   
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Update List Items</title>
</head>

<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <button onclick=
  "updateListItems()">Update Items</button>
  
  <script>
    function updateListItems() {
      const items = 
      document.getElementsByTagName('li');
      for (let i = 0; i < items.length; i++)
       {
        items[i].textContent = 
        `Updated Item ${i + 1}`;
      }
    }
  </script>
</body>

</html>

Supported Browsers

Method
getElementsByTagName()	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page