ThegetElementsByTagName method ofDocument interface returns anHTMLCollection of elements with the given tag name.

The completedocument is searched, including the root node. The returnedHTMLCollectionis live, meaning that it updates itself automatically to stay in sync with the DOM treewithout having to calldocument.getElementsByTagName() again.

Syntax

getElementsByTagName(name)

Parameters

name

A string representing the name of the elements. The specialstring* represents all elements.

Return value

A liveHTMLCollection of found elements in the order they appear in the tree.

Examples

In the following example,getElementsByTagName() starts from a particularparent element and searches top-down recursively through the DOM from that parentelement, building a collection of all descendant elements which match the tagname parameter. This demonstrates bothdocument.getElementsByTagName() and the functionally identicalElement.getElementsByTagName(), which starts the search at a specificelement within the DOM tree.

Clicking the buttons usesgetElementsByTagName() to count the descendantparagraph elements of a particular parent (either the document itself or one of twonested<div> elements).

<p>Some outer text</p><p>Some outer text</p><div>  <p>Some div1 text</p>  <p>Some div1 text</p>  <p>Some div1 text</p>  <div>    <p>Some div2 text</p>    <p>Some div2 text</p>  </div></div><p>Some outer text</p><p>Some outer text</p><button>Show all p elements in document</button><br /><button>Show all p elements in div1 element</button><br /><button>Show all p elements in div2 element</button>

body {  border: solid green 3px;}#div1 {  border: solid blue 3px;}#div2 {  border: solid red 3px;}

function getAllParaElems() {  const allParas = document.getElementsByTagName("p");  const num = allParas.length;  alert(`There are ${num} paragraph in this document`);}function div1ParaElems() {  const div1 = document.getElementById("div1");  const div1Paras = div1.getElementsByTagName("p");  const num = div1Paras.length;  alert(`There are ${num} paragraph in #div1`);}function div2ParaElems() {  const div2 = document.getElementById("div2");  const div2Paras = div2.getElementsByTagName("p");  const num = div2Paras.length;  alert(`There are ${num} paragraph in #div2`);}document.getElementById("btn1").addEventListener("click", getAllParaElems);document.getElementById("btn2").addEventListener("click", div1ParaElems);document.getElementById("btn3").addEventListener("click", div2ParaElems);

Notes

When called on an HTML document,getElementsByTagName() lower-cases itsargument before proceeding. This is undesirable when trying to matchcamel case SVGelements in a subtree in an HTML document.document.getElementsByTagNameNS() is useful in that case. See alsoFirefox bug 499656.

document.getElementsByTagName() is similar toElement.getElementsByTagName(), except that its search encompasses thewhole document.

Specifications

Browser compatibility

See also

• Element.getElementsByTagName()
• document.getElementById() to return a reference to an element by itsid
• document.getElementsByName() to return a reference to an element byitsname
• document.querySelector() for powerful selectors via queries like'div.myclass'