HTML Document getElementsByTagName() Method: Getting Elements by Tag Name

Table of Contents

HTML Document `getElementsByTagName()` Method: Getting Elements by Tag Name

The getElementsByTagName() method is a fundamental part of the HTML DOM (Document Object Model). It allows you to retrieve all elements in an HTML document that have a specified tag name. This method returns an HTMLCollection, which is a live-updating array-like object of elements. This guide provides a comprehensive overview of the getElementsByTagName() method, including its syntax, usage, practical examples, and important considerations.

What is `getElementsByTagName()`?

The getElementsByTagName() method is used to select all elements in a document that match a specified HTML tag name. It is a powerful tool for traversing and manipulating the DOM, allowing developers to target specific types of elements, such as all paragraphs (<p>), all divisions (<div>), or all headings (<h1> – <h6>).

Purpose of `getElementsByTagName()`

The primary purpose of the getElementsByTagName() method is to:

Select elements in an HTML document based on their tag name.
Retrieve a collection of elements for further manipulation, such as modifying their content, attributes, or styles.
Enable dynamic updates and interactions based on the structure of the HTML document.

Syntax

The syntax for using the getElementsByTagName() method is straightforward:

const elements = document.getElementsByTagName(tagName);

Where:

tagName: A string representing the tag name of the elements you want to retrieve.
elements: An HTMLCollection containing all elements in the document with the specified tag name.

Parameters

Parameter	Type	Description
`tagName`	String	The tag name of the elements to retrieve. It can be any valid HTML tag name (e.g., `”p”`, `”div”`, `”h1″`). You can also use `” * “` to select all elements in the document.

Return Value

Return Value	Type	Description
`HTMLCollection`	Object	A live-updating collection of elements with the specified tag name. If no elements match the tag name, an empty `HTMLCollection` is returned.

Note: The HTMLCollection is a live collection, meaning that it automatically updates if the DOM changes. This is an important consideration when iterating over the collection and manipulating the DOM. 💡

Basic Usage

Let’s start with a basic example of how to use the getElementsByTagName() method to retrieve all paragraph elements in an HTML document.

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagName Example</title>
</head>
<body>
  <p id="paragraph1">This is the first paragraph.</p>
  <p id="paragraph2">This is the second paragraph.</p>
  <p id="paragraph3">This is the third paragraph.</p>

  <script>
    const paragraphs_basic = document.getElementsByTagName("p");
    console.log("Number of paragraphs:", paragraphs_basic.length);
    for (let i = 0; i < paragraphs_basic.length; i++) {
      console.log(paragraphs_basic[i].id);
    }
  </script>
</body>
</html>

Output:

Number of paragraphs: 3
paragraph1
paragraph2
paragraph3

This example retrieves all <p> elements in the document and logs their IDs to the console.

Selecting All Elements

You can use the " * " wildcard to select all elements in the document, regardless of their tag name.

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagName All Elements Example</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  <div>This is a div.</div>

  <script>
    const allElements_getall = document.getElementsByTagName("*");
    console.log("Number of elements:", allElements_getall.length);
    for (let i = 0; i < allElements_getall.length; i++) {
      console.log(allElements_getall[i].tagName);
    }
  </script>
</body>
</html>

Output:

Number of elements: 5
HTML
HEAD
TITLE
BODY
H1
P
DIV
SCRIPT

This example retrieves all elements in the document and logs their tag names to the console.

Accessing Elements in the HTMLCollection

The HTMLCollection returned by getElementsByTagName() is an array-like object, but it is not a true array. You can access elements in the collection using their index:

<!DOCTYPE html>
<html>
<head>
  <title>Accessing Elements by Index</title>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    const listItems_access = document.getElementsByTagName("li");
    console.log("First list item:", listItems_access[0].textContent);
    console.log("Second list item:", listItems_access[1].textContent);
  </script>
</body>
</html>

Output:

First list item: Item 1
Second list item: Item 2

This example accesses the first and second <li> elements in the collection and logs their text content to the console.

Modifying Elements

You can use the getElementsByTagName() method to select elements and then modify their properties, such as their text content or attributes.

<!DOCTYPE html>
<html>
<head>
  <title>Modifying Elements Example</title>
</head>
<body>
  <h1 id="headingModify">Original Heading</h1>

  <script>
    const headings_modify = document.getElementsByTagName("h1");
    if (headings_modify.length > 0) {
      headings_modify[0].textContent = "Modified Heading";
      headings_modify[0].style.color = "blue";
    }
  </script>
</body>
</html>

Output:

The heading text will change from “Original Heading” to “Modified Heading”, and its color will change to blue.

Using `getElementsByTagName()` within a Specific Element

The getElementsByTagName() method can also be called on a specific element to search for elements within that element’s subtree.

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagName Within Element Example</title>
</head>
<body>
  <div id="outerDiv">
    <p>Paragraph in outer div.</p>
    <div id="innerDiv">
      <p>Paragraph in inner div.</p>
    </div>
  </div>

  <script>
    const outerDiv_getelement = document.getElementById("outerDiv");
    const paragraphs_getelement = outerDiv_getelement.getElementsByTagName("p");
    console.log("Number of paragraphs in outer div:", paragraphs_getelement.length);
    for (let i = 0; i < paragraphs_getelement.length; i++) {
      console.log(paragraphs_getelement[i].textContent);
    }
  </script>
</body>
</html>

Output:

Number of paragraphs in outer div: 1
Paragraph in outer div.

This example retrieves the outerDiv element and then uses getElementsByTagName() to find all <p> elements within that div.

Practical Example: Highlighting Specific Words

Let’s create a practical example that highlights specific words within paragraph elements.

<!DOCTYPE html>
<html>
<head>
  <title>Highlighting Words Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="paragraphHighlight">
    This is a sample paragraph that contains the word important and the word
    highlight.
  </p>

  <script>
    const highlightWords = ["important", "highlight"];
    const paragraph_highlight = document.getElementById("paragraphHighlight");
    let text = paragraph_highlight.textContent;

    highlightWords.forEach((word) => {
      const regex = new RegExp(word, "g");
      text = text.replace(
        regex,
        `<span class="highlight">${word}</span>`
      );
    });

    paragraph_highlight.innerHTML = text;
  </script>
</body>
</html>

In this example, the words “important” and “highlight” will be highlighted with a yellow background in the paragraph. The innerHTML property is used because the highlighted words use span tags and those can only be created using innerHTML.

Real-World Applications of `getElementsByTagName()`

The getElementsByTagName() method is used in various real-world applications, including:

Content Management Systems (CMS): Dynamically formatting and displaying content based on HTML tags.
Web Scraping: Extracting specific data from HTML documents by targeting elements with particular tag names.
Accessibility Tools: Identifying and modifying elements to improve accessibility for users with disabilities.
Testing Frameworks: Selecting elements to perform automated tests and assertions.

Important Considerations

Live Collection: The HTMLCollection returned by getElementsByTagName() is a live collection. This means that if you add or remove elements with the specified tag name, the collection will automatically update. Be cautious when iterating over the collection and manipulating the DOM simultaneously, as it can lead to unexpected behavior.
Performance: While getElementsByTagName() is generally efficient, it can be slower than getElementById() or querySelector() when dealing with large documents. Consider using more specific selectors when performance is critical.
Case-Insensitivity: The tagName parameter is case-insensitive. For example, document.getElementsByTagName("P") will return the same elements as document.getElementsByTagName("p").

Alternatives to `getElementsByTagName()`

While getElementsByTagName() is a useful method, there are alternative methods that may be more appropriate in certain situations:

querySelector() and querySelectorAll(): These methods allow you to use CSS selectors to select elements, providing more flexibility and specificity.
getElementById(): This method is the fastest way to select a single element by its ID.
getElementsByClassName(): This method allows you to select elements by their class name.

Browser Support

The getElementsByTagName() method is supported by all major browsers, including:

Chrome
Firefox
Safari
Edge
Internet Explorer

Conclusion

The getElementsByTagName() method is a fundamental tool for working with the HTML DOM. It allows you to select elements by their tag name, enabling you to manipulate and interact with the structure of an HTML document. By understanding its syntax, usage, and important considerations, you can effectively leverage this method to create dynamic and interactive web applications. 🚀

HTML Document getElementsByTagName() Method: Getting Elements by Tag Name

HTML Document getElementsByTagName() Method: Getting Elements by Tag Name

What is getElementsByTagName()?

Purpose of getElementsByTagName()

Syntax

Parameters

Return Value

Basic Usage

Selecting All Elements

Accessing Elements in the HTMLCollection

Modifying Elements

Using getElementsByTagName() within a Specific Element

Practical Example: Highlighting Specific Words

Real-World Applications of getElementsByTagName()

Important Considerations

Alternatives to getElementsByTagName()

Browser Support

Conclusion

Continue Reading

JavaScript Window length Property: Window Length

JavaScript Window name Property: Window Name

JavaScript Window navigator Property: Window Navigator

JavaScript Window opener Property: Window Opener

JavaScript Window outerHeight Property: Window Outer Height

JavaScript Window outerWidth Property: Window Outer Width

HTML Document `getElementsByTagName()` Method: Getting Elements by Tag Name

What is `getElementsByTagName()`?

Purpose of `getElementsByTagName()`

Using `getElementsByTagName()` within a Specific Element

Real-World Applications of `getElementsByTagName()`

Alternatives to `getElementsByTagName()`