JavaScript getElementsByTagName()

document.getElementsByTagName() returns a live HTMLCollection of elements with the specified tag name. Use "*" to select all descendant elements in the document.

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

Syntax:

document.getElementsByTagName("tagName")

Count All Tags or a Particular Tag Top ↑

The original plus2net examples count all elements using "*", then count specific tags such as paragraphs or line breaks.

const allElements = document.getElementsByTagName("*");
const paragraphs = document.getElementsByTagName("p");

console.log(`Total elements: ${allElements.length}`);
console.log(`Paragraphs: ${paragraphs.length}`);

const breaks = document.getElementsByTagName("br");
console.log(breaks.length);

HTML tag-name matching is case-insensitive in an HTML document, so "p" is the conventional form.

Loop Through Matching Elements Top ↑

An HTMLCollection is iterable in modern browsers, so for...of is a clear way to process each element.

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

for (const paragraph of paragraphs) {
  paragraph.style.color = "red";
}

A traditional index loop is also valid:

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

for (let i = 0; i < paragraphs.length; i++) {
  console.log(paragraphs[i].textContent);
}

Change the First Matching Element Top ↑

Use index 0 for the first match, but check that at least one element exists first.

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

if (paragraphs.length > 0) {
  paragraphs[0].textContent = "Welcome to plus2net";
}

getElementsByTagName() Returns a Live Collection Top ↑

The returned HTMLCollection is live. If matching elements are added to or removed from the DOM, the collection updates automatically.

const items = document.getElementsByTagName("li");
console.log(items.length);

const newItem = document.createElement("li");
document.body.append(newItem);

// items.length now reflects the newly added <li>
console.log(items.length);

This can be useful, but it can also surprise you if you add or remove matching elements while iterating. When you need a fixed snapshot, querySelectorAll() returns a static NodeList.

Search Inside a Specific Element Top ↑

getElementsByTagName() is also available on individual elements, which limits the search to descendants of that element.

const article = document.getElementById("article");
const articleLinks = article
  ? article.getElementsByTagName("a")
  : [];

getElementsByTagName() vs querySelectorAll() Top ↑

const highlightedParagraphs = document.querySelectorAll("p.highlight");

Common Mistakes Top ↑

• Calling the method getElementByTagName(). The correct method name is plural: getElementsByTagName().
• Expecting one element instead of a collection.
• Using forEach() directly on an HTMLCollection. Use for...of, an index loop, or convert it with Array.from().
• Changing the number of matching elements while iterating over the live collection without considering that the collection updates immediately.
• Using innerHTML when plain text with textContent is sufficient.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: