JavaScript getElementsByTagName
last modified April 2, 2025
In this article, we explore the getElementsByTagName method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to access elements by their tag name within a specific context.
Basic Definition
The getElementsByTagName method returns a live HTMLCollection of
elements with the given tag name. It can be called on any element or the
document object to search within that context.
Unlike getElementById, this method returns multiple elements. The
collection is live, meaning it automatically updates when the DOM changes.
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>A div element</div>
<p>Third paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Outputs: 3
console.log(paragraphs[1].textContent); // Outputs: Second paragraph
</script>
</body>
</html>
In this basic example, we use getElementsByTagName to get all
paragraph elements. The method returns an HTMLCollection that we can access
like an array.
The example shows how to check the number of elements found and how to access specific elements from the collection by their index position.
Searching Within a Specific Element
This example shows how to use getElementsByTagName on a specific
element rather than the entire document.
<!DOCTYPE html>
<html>
<head>
<title>Searching Within Element</title>
</head>
<body>
<div id="content">
<p>First paragraph in content</p>
<span>A span element</span>
<p>Second paragraph in content</p>
</div>
<p>Paragraph outside content</p>
<script>
const contentDiv = document.getElementById('content');
const contentParagraphs = contentDiv.getElementsByTagName('p');
console.log(contentParagraphs.length); // Outputs: 2
contentParagraphs[0].style.color = 'red';
</script>
</body>
</html>
Here we first get a reference to a specific div element, then use
getElementsByTagName on that element to find only paragraphs
within it.
This demonstrates how the search scope can be limited to a specific part of the DOM tree, which is more efficient than searching the entire document.
Working with the Live Collection
This example demonstrates the live nature of the HTMLCollection returned by
getElementsByTagName.
<!DOCTYPE html>
<html>
<head>
<title>Live Collection</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button onclick="addItem()">Add Item</button>
<script>
const listItems = document.getElementsByTagName('li');
console.log(listItems.length); // Initially 2
function addItem() {
const newItem = document.createElement('li');
newItem.textContent = 'New Item';
document.getElementById('list').appendChild(newItem);
console.log(listItems.length); // Increases each click
}
</script>
</body>
</html>
This example shows how the collection automatically updates when new elements
are added to the DOM. The listItems collection stays current
without needing to requery.
The live nature of the collection can be both useful and potentially problematic in certain scenarios, especially with performance in large DOMs.
Iterating Through Elements
This example demonstrates different ways to iterate through the elements
returned by getElementsByTagName.
<!DOCTYPE html>
<html>
<head>
<title>Iterating Elements</title>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<script>
const items = document.getElementsByTagName('div');
// Using a for loop
for (let i = 0; i < items.length; i++) {
items[i].style.color = 'blue';
}
// Using for...of (modern browsers)
for (const item of items) {
item.style.fontWeight = 'bold';
}
// Converting to array (for array methods)
Array.from(items).forEach(item => {
console.log(item.textContent);
});
</script>
</body>
</html>
This example shows three different approaches to working with the collection: traditional for loop, for...of loop, and converting to an array.
Each method has its use cases. The array conversion is particularly useful
when you want to use array methods like forEach, map,
or filter.
Combining with Other DOM Methods
This example shows how to combine getElementsByTagName with other
DOM methods for more complex queries.
<!DOCTYPE html>
<html>
<head>
<title>Combining Methods</title>
</head>
<body>
<div class="section">
<h2>Section 1</h2>
<p>Content 1</p>
</div>
<div class="section">
<h2>Section 2</h2>
<p>Content 2</p>
</div>
<script>
// Get all sections
const sections = document.getElementsByClassName('section');
// For each section, get its h2 and p elements
for (const section of sections) {
const heading = section.getElementsByTagName('h2')[0];
const paragraph = section.getElementsByTagName('p')[0];
console.log(heading.textContent + ': ' + paragraph.textContent);
}
</script>
</body>
</html>
In this example, we first get all elements with class "section", then for each
section we find its h2 and p elements using getElementsByTagName.
This demonstrates how DOM methods can be combined to create more specific queries, allowing you to precisely target the elements you need to work with.
Source
MDN getElementsByTagName Documentation
In this article, we have shown how to use getElementsByTagName
in JavaScript. This method is fundamental for DOM manipulation when you need
to work with elements by their tag name.
Author
List all JS DOM tutorials.