JavaScript getElementsByTagName
last modified April 2, 2025
In this article, we explore the document.getElementsByTagName method
in JavaScript. This method is essential for DOM manipulation, allowing developers
to access elements by their tag name.
Basic Definition
The document.getElementsByTagName method returns a live
HTMLCollection of elements with the given tag name. Unlike
getElementById, it can return multiple elements.
The collection is live, meaning it automatically updates when the document changes. The method searches the entire document by default, but can also be called on specific elements to search their descendants.
Basic getElementsByTagName
This example demonstrates how to access all paragraph elements in a document.
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementsByTagName</title>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>Not a paragraph</div>
<p>Third paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Outputs: 3
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].textContent);
}
</script>
</body>
</html>
In this basic example, we retrieve all paragraph elements using
getElementsByTagName('p'). The method returns an HTMLCollection
that we can iterate through.
The example logs the number of paragraphs found and then loops through them to display each paragraph's content. This shows the fundamental usage of the method.
Modifying Multiple Elements
This example shows how to modify all elements of a specific tag at once.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Multiple Elements</title>
</head>
<body>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h2>Section 3</h2>
<button onclick="changeHeaders()">Change Headers</button>
<script>
function changeHeaders() {
const headers = document.getElementsByTagName('h2');
for (let i = 0; i < headers.length; i++) {
headers[i].style.color = 'blue';
headers[i].textContent = `Modified Section ${i + 1}`;
}
}
</script>
</body>
</html>
Here we have multiple h2 elements and a button. When clicked, the button changes
all h2 elements' text and color using getElementsByTagName.
This demonstrates how to perform bulk operations on elements of the same type. The live collection ensures any newly added h2 elements would also be included.
Searching Within an Element
This example demonstrates searching for elements within a specific container.
<!DOCTYPE html>
<html>
<head>
<title>Searching Within Element</title>
</head>
<body>
<div id="container">
<span>Inner span 1</span>
<p>Paragraph inside container</p>
<span>Inner span 2</span>
</div>
<span>Outer span</span>
<script>
const container = document.getElementById('container');
const innerSpans = container.getElementsByTagName('span');
console.log(innerSpans.length); // Outputs: 2
for (let span of innerSpans) {
console.log(span.textContent);
}
</script>
</body>
</html>
In this example, we first get a container element, then use
getElementsByTagName on that container to find only spans within it.
This shows how to limit your search to a specific part of the DOM tree. The outer span is not included in the results, demonstrating scoped searching.
Working with Forms
This example shows how to work with form inputs using getElementsByTagName.
<!DOCTYPE html>
<html>
<head>
<title>Form Inputs</title>
</head>
<body>
<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="remember">
</form>
<button onclick="logInputs()">Log Inputs</button>
<script>
function logInputs() {
const form = document.getElementById('myForm');
const inputs = form.getElementsByTagName('input');
for (let input of inputs) {
console.log(`${input.name}: ${input.value}`);
}
}
</script>
</body>
</html>
Here we retrieve all input elements within a specific form using
getElementsByTagName. We then log each input's name and value.
This demonstrates a practical use case for form handling. The method helps collect all form inputs regardless of their type for processing or validation.
Creating a Table of Contents
This example shows how to generate a table of contents from heading elements.
<!DOCTYPE html>
<html>
<head>
<title>Table of Contents</title>
</head>
<body>
<h1>Main Title</h1>
<h2>Section 1</h2>
<h2>Section 2</h2>
<h3>Subsection 2.1</h3>
<h2>Section 3</h2>
<div id="toc"></div>
<script>
const headings = document.getElementsByTagName('h2');
const toc = document.getElementById('toc');
let html = '<h3>Table of Contents</h3><ul>';
for (let heading of headings) {
html += `<li>${heading.textContent}</li>`;
}
html += '</ul>';
toc.innerHTML = html;
</script>
</body>
</html>
In this example, we gather all h2 elements to automatically generate a table of contents. The headings are collected and displayed in an unordered list.
This demonstrates a real-world application of getElementsByTagName
for content organization. The live collection ensures the TOC would update if
headings were dynamically added later.
Source
MDN getElementsByTagName Documentation
In this article, we have shown how to use document.getElementsByTagName
in JavaScript. This method is powerful for working with groups of similar elements
in web development.
Author
List all JS DOM tutorials.