codeswithpankaj

getElementsByTagName

JavaScript DOM (Document Object Model) - getElementsByTagName() Tutorial

Table of Contents

  1. Introduction to the JavaScript DOM

  2. What is getElementsByTagName()?

  3. Syntax of getElementsByTagName()

  4. Accessing Elements by Tag Name

  5. Practical Examples

    • Changing Text Content of Elements

    • Changing Styles of Multiple Elements

    • Iterating Over Elements with getElementsByTagName()

    • Adding Event Listeners to Elements

  6. Limitations of getElementsByTagName()

  7. Conclusion

1. Introduction to the JavaScript DOM

Welcome to the Codes with Pankaj tutorial on the JavaScript DOM (Document Object Model) and the getElementsByTagName() method! In this tutorial, we'll explore how to use JavaScript to access and manipulate HTML elements based on their tag name using the getElementsByTagName() method. Let’s dive in!

The DOM allows JavaScript to interact with the structure of a webpage, enabling dynamic updates and interactions. The getElementsByTagName() method is particularly useful when you want to select and manipulate multiple elements of the same type, such as all paragraphs or all headers.

2. What is getElementsByTagName()?

The getElementsByTagName() method is used to select and return a collection of all elements in the document that have a specific tag name. This method allows you to work with multiple elements that share the same tag.

Unlike getElementById() and getElementsByClassName(), which focus on specific elements or classes, getElementsByTagName() retrieves all elements with the specified tag name, making it a powerful tool for broad manipulations.

3. Syntax of getElementsByTagName()

document.getElementsByTagName(tagName);

  • tagName: The name of the tag you want to select (e.g., "p", "div", "h1"). This should be a string.

4. Accessing Elements by Tag Name

The getElementsByTagName() method returns a live HTMLCollection of all elements that match the specified tag name. This collection can be accessed like an array, using indices.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Header 1</h1>
    <h1>Header 2</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <script>
        let headers = document.getElementsByTagName("h1");
        console.log(headers);  // Outputs a collection of <h1> elements
    </script>
</body>
</html>

5. Practical Examples

Changing Text Content of Elements

You can use getElementsByTagName() to access elements and change their text content.

Example:

let headers = document.getElementsByTagName("h1");
for (let i = 0; i < headers.length; i++) {
    headers[i].textContent = "Updated Header " + (i + 1);
}

Changing Styles of Multiple Elements

You can also change the styles of all elements that share a tag.

Example:

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.color = "green";
    paragraphs[i].style.fontSize = "18px";
}

Iterating Over Elements with getElementsByTagName()

Since getElementsByTagName() returns a collection, you can iterate over the elements using a loop.

Example:

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
    console.log("Paragraph " + (i + 1) + ": " + paragraphs[i].textContent);
}

Adding Event Listeners to Elements

You can use getElementsByTagName() to add event listeners to all elements of a specific tag type.

Example:

let headers = document.getElementsByTagName("h1");
for (let i = 0; i < headers.length; i++) {
    headers[i].addEventListener("click", function() {
        alert("Header " + (i + 1) + " clicked!");
    });
}

6. Limitations of getElementsByTagName()

  • Live Collection: The HTMLCollection returned by getElementsByTagName() is live, meaning it automatically updates if elements are added or removed from the DOM. This can lead to unexpected behavior if the DOM changes after you retrieve the collection.

  • No Direct Array Methods: The HTMLCollection returned by getElementsByTagName() is not an array, so you cannot directly use array methods like forEach() or map(). To use these methods, you must convert the collection to an array.

Example:

let headers = document.getElementsByTagName("h1");
let headersArray = Array.from(headers);
headersArray.forEach(header => {
    header.style.border = "2px solid red";
});

7. Conclusion

In this detailed tutorial, we've explored the getElementsByTagName() method, which allows you to select and manipulate multiple elements based on their tag name. By mastering this method, you can efficiently update and interact with groups of elements, making your web pages more dynamic and responsive.

For more tutorials and examples, visit www.codeswithpankaj.com! Happy coding!

PreviousgetElementsByClassName()NextinnerHTML property

Last updated