Tutorials


JavaScript DOM getElementsByTagName


The getElementsByTagName method in JavaScript is used to retrieve all elements in the document that match a specified tag name. Unlike getElementById, which returns a single element, getElementsByTagName returns a live HTMLCollection of elements.

Syntax

const elements = document.getElementsByTagName(tagName);

Parameters

  • tagName: A string representing the tag name of the elements to be retrieved. This is case-insensitive, so div, DIV, and DiV are treated as the same tag.

Return Value

  • Returns an HTMLCollection of elements with the specified tag name. The HTMLCollection is live, meaning it automatically updates when elements with the specified tag name are added or removed from the document.

Usage

  1. Selecting Elements

    To get all elements with a specific tag name:

    <!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagName Example</title>
</head>
<body>
  <div>Div 1</div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <div>Div 2</div>
  <button onclick="changeDivs()">Change Divs</button>

  <script>
    function changeDivs() {
      // Get all <div> elements
      const divs = document.getElementsByTagName('div');
      
      // Loop through the HTMLCollection and change background color
      for (let i = 0; i < divs.length; i++) {
        divs[i].style.backgroundColor = 'yellow';
      }
    }
  </script>
</body>
</html>

    In this example, clicking the button will change the background color of all <div> elements to yellow.

  2. Modifying Elements

    You can modify properties or styles of elements retrieved with getElementsByTagName:

    const paragraphs = document.getElementsByTagName('p');

for (let i = 0; i < paragraphs.length; i++) {
  // Change text content
  paragraphs[i].textContent = 'Updated paragraph text!';
  
  // Add a class
  paragraphs[i].classList.add('updated');
  
  // Remove the tag name-based class
  paragraphs[i].classList.remove('old-class');
}

  3. Live Collection

    The HTMLCollection returned by getElementsByTagName is live, which means it updates automatically when the DOM changes:

    const divs = document.getElementsByTagName('div');
console.log(divs.length); // Logs the number of <div> elements initially

// Dynamically add a new <div> element
const newDiv = document.createElement('div');
newDiv.textContent = 'New div';
document.body.appendChild(newDiv);

console.log(divs.length); // Logs the updated number of <div> elements, including the new one

  4. Limitations

    • Live Collection: The live nature of the HTMLCollection can sometimes lead to unexpected results if you make changes to the DOM that affect the collection.
    • Performance Considerations: For large documents with many elements, using getElementsByTagName can impact performance, especially if the DOM is frequently modified.

Best Practices

  • Efficient Iteration: When working with HTMLCollection, use a loop to efficiently iterate through the elements and apply changes.
  • Avoid Overuse: If you frequently add or remove elements, be cautious with live collections as they might lead to performance issues or unexpected results.
  • Use Alternatives: Consider using querySelectorAll if you need more complex selections or prefer static collections.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about