JavaScript Document getElementsByTagName() Method

What You’ll Learn

document.getElementsByTagName() is an instance method that returns every element with a given tag name (see MDN Document: getElementsByTagName()). Learn the live HTMLCollection, the * wildcard, element-scoped searches, how it compares to querySelectorAll, and five try-it labs.

Introduction

Need every <p>, <li>, or <img> on the page? Pass the tag name to document.getElementsByTagName() and get a live list.

MDN: the method returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. The collection is live — it stays in sync with the DOM without calling the method again.

Related tutorials: getElementsByName(), getElementsByClassName(), getElementsByTagNameNS().

Understanding document.getElementsByTagName()

An instance method on the Document interface (MDN). The same idea also exists on elements for scoped searches.

• name — tag name string; * means all elements (MDN).
• Return value — a live HTMLCollection in tree order (MDN).
• Whole document — search includes the root node (MDN).
• Element scope — call on a parent to search only descendants (MDN).
• HTML lowercasing — on HTML documents the argument is lower-cased (MDN).
• SVG tip — for camel-case SVG tags, prefer getElementsByTagNameNS() (MDN).

📝 Syntax

General form of Document.getElementsByTagName (MDN):

getElementsByTagName(name)

Parameters

• name — a string representing the name of the elements. The special string * represents all elements (MDN).

Return value

A live HTMLCollection of found elements in the order they appear in the tree (MDN).

MDN quick samples

const allParas = document.getElementsByTagName("p");
const everything = document.getElementsByTagName("*");
const div1Paras = document.getElementById("div1").getElementsByTagName("p");

⚖️ getElementsByTagName vs querySelectorAll

Examples Gallery

Examples follow MDN Document: getElementsByTagName() and practical beginner patterns.

const allParas = document.getElementsByTagName("p");
const num = allParas.length;
console.log(`There are ${num} paragraph in this document`);

There are 8 paragraph in this document
(depends on the page markup)

const div1 = document.getElementById("div1");
const div1Paras = div1.getElementsByTagName("p");
console.log(`There are ${div1Paras.length} paragraph in #div1`);

const div2 = document.getElementById("div2");
const div2Paras = div2.getElementsByTagName("p");
console.log(`There are ${div2Paras.length} paragraph in #div2`);

There are 5 paragraph in #div1
There are 2 paragraph in #div2

const all = document.getElementsByTagName("*");
console.log(all.length);
console.log(all[0] && all[0].tagName);

12
HTML
(counts every element in the document)

const list = document.getElementsByTagName("li");
console.log("before:", list.length);

const extra = document.createElement("li");
extra.textContent = "New item";
document.querySelector("ul").appendChild(extra);

console.log("after:", list.length); // live list updated (MDN)

before: 2
after: 3

const imgs = document.getElementsByTagName("img");
for (const img of imgs) {
  img.style.border = "2px solid teal";
}
console.log("styled:", imgs.length);

styled: 2
(each img gets a teal border)

🚀 Common Use Cases

• Count tags — how many paragraphs or images exist?
• Scoped widgets — only tags inside a panel or card.
• Batch updates — style or read every matching tag.
• Live dashboards — keep a length counter as the DOM changes.
• Prefer querySelectorAll — for complex selectors or static snapshots.
• SVG namespaces — use getElementsByTagNameNS() for camel-case SVG (MDN).

📝 Notes

• MDN: Baseline Widely available since July 2015.
• MDN: returns a live HTMLCollection in tree order.
• MDN: * matches all elements.
• MDN: on HTML documents the argument is lower-cased before matching.
• MDN: for camel-case SVG in HTML, prefer getElementsByTagNameNS().
• Related: getElementsByName(), getElementsByClassName(), getElementsByTagNameNS().

💡 Best Practices