HTML DOM Document getElementsByTagName() method

Definition and usage

getElementsByTagName() The method returns a collection of all elements with the specified tag name.

getElementsByTagName() The method returns HTMLCollection.

getElementsByTagName() The property is read-only.

Note:getElementsByTagName("*") Returns all elements in the document.

HTMLCollection

HTMLCollection Is a collection of HTML elements similar to an array (list).

Elements in the collection can be accessed by index (starting from 0).

length The property returns the number of elements in the collection.

See also:

getElementById() method

getElementsByClassName() method

querySelector() method

querySelectorAll() method

HTMLCollection object

Instance

Example 1

Get all elements with the tag name "li":

const collection = document.getElementsByTagName("li");

Try It Yourself

Example 2

Get all elements in the document:

const collection = document.getElementsByTagName("*");

Try It Yourself

Example 3

Change the internal HTML of the first <p> element in the document:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Try It Yourself

Example 4

Number of <li> elements in the document:

let numb = document.getElementsByTagName("li").length;

Try It Yourself

Example 5

Change the background color of all <p> elements:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Try It Yourself

Syntax

document.getElementsByTagName(tagName)

Parameter

Parameter Description
tagName Required. The tag name of the element.

Return Value

Type Description
Object

HTMLCollection Object.

A collection of elements with the specified tag name.

Sorted according to the order of elements in the document.

Technical Details

This method will return a NodeList object (which can be treated as a read-only array), which stores all Element nodes with the specified tag name in the document, and their order is the same as the order in which they appear in the source document.

The NodeList object is 'live', which means that if elements with the specified tag name are added or deleted in the document, its content will be automatically updated as necessary.

HTML documents are not case-sensitive, so you can specify it in any case format tagName, it will match all tags with the same name in the document, regardless of the case format used in the source document. But XML documents are case-sensitive,tagName It only matches tags with the same name and case format as those in the source document.

Tip:The Element interface defines a method with the same name, which only retrieves the subtree of the document. Additionally, the HTMLDocument interface defines getElementByName() Method, it retrieves elements based on the value of the name attribute (not the tag name).

Browser Support

document.getElementsByTagName() It is a DOM Level 1 (1998) feature.

All browsers support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related Pages

JavaScript Reference Manual:element.getElementsByTagName()

JavaScript Tutorial:JavaScript HTML DOM Node List