HTML DOM Element getElementsByTagName() method

Definition and Usage

getElementsByTagName() The method returns a collection of child elements with the specified tag name, as a NodeList object.

Tip:Parameter value "*" Returns all child elements of the element.

See also:

getElementsByClassName() method

querySelector() method

querySelectorAll() method

NodeList

NodeList Is a node collection (list) similar to an array.

You can access nodes in the list by index (index). The index starts from 0.

length attributeReturns the number of nodes in the list.

Instance

Example 1

Change the HTML content of the first <li> element in the list:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Try it yourself

Example 2

Number of <p> elements in "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Try it yourself

Example 3

Change the font size of the second <p> element in "myDIV":

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Try it yourself

Example 4

Change the background color of all <p> elements in "myDIV":

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

Try it yourself

Example 5

Change the background color of the fourth element (index 3) in "myDIV":

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Try it yourself

Example 6

Use the "*" parameter to change the background color of all elements in "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Try it yourself

Syntax

element.getElementsByTagName(tagname)

Parameter

Parameter Description
tagname Required. The tag name of the child element.

Return value

Type Description
NodeList

Child elements of elements with the given tag name.

Elements are sorted in the order they appear in the source code.

Technical details

getElementsByTagName() The method will traverse the descendants of the specified element, returning an array (actually a NodeList object) of Element nodes that represent all document elements with the specified tag name. The order of elements in the returned array is the same as their order in the document source code.

Note

Document interfaceAlso defines getElementsByTagName() method, which is similar to this method but traverses the entire document instead of traversing the descendants of a certain element.

Do not confuse this method with The HTMLDocument.getElementsByName() method May be confused with the latter, which retrieves elements based on the value of the element's name attribute, rather than based on their tag names.

Browser support

All browsers support element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support