Get Element(s) By Tag Name In JavaScript

Learn how to get one or more HTML element objects by tag name using getElementsByTagName() and querySelectorAll() methods in JavaScript.

1. Get Element(s) By Tag Name Using getElementsByTagName()
2. Get Element(s) By Tag Name Using querySelectorAll()
3. Get Element(s) By With Multiple Tag Names
4. Get Element(s) By Tag Name From Parent Element

Typically, you’ll want to get element(s) by class name instead of tag name in order to avoid targeting the wrong elements.

1. Get Element(s) By Tag Name Using getElementsByTagName()

Learn how to get one or more elements by tag name using the getElementsByTagName() method.

In the below HTML example, there are three div elements and two span elements.

<div>div <br>box 1</div>
<div>div <br>box 2</div>
<div>div <br>box 3</div>
<span>span <br>box 4</span>
<span>span <br>box 5</span>

Let’s get only the span elements.

const spanBoxes = document.getElementsByTagName("span");
console.log(spanBoxes); // HTMLCollection[2]

Call the getElementsByTagName() on the global document object.

The getElementsByTagName() method takes one argument which is the tag name.

In this case…span

It gets all div elements from the entire document and returns an array-like object called HTMLCollection.

Assign it to a constant boxes.

The boxes HTML Collection has three items in it which can be then iterated using for..of loop.

for(spanBoxe of spanBoxes) {
   box.style.border = "4px solid";
}

Try it out

In the below example, get all the div elements by tag name, loop through them, and apply a border style to each of them.

See the Pen Get Element By Tag Name #1 by SoftAuthor (@softauthor) on CodePen.

2. Get Element(s) By Tag Name Using querySelectorAll()

Using the querySelectorAll() method, you can get one or more HTML elements by tag name as well.

Let’s get all the div elements this time.

const divBoxes = document.querySelectorAll("div");
console.log(divBoxes); // NodeList[3]

Invoke the querySelectorAll() method on the document object.

The querySelectorAll() method also takes one argument which is tag name as well.

In this case: div

The querySelectorAll() method returns NodeList which is an object containing a list of all element nodes.

Unlike HTMLCollection, NodeList can be iterated using the forEach() method in addition to for…of.

divBoxes.forEach(divBox => {
  divBox.style.border = "1px solid";
})

Try it out

See the Pen Get Element By Tag Name #2 by SoftAuthor (@softauthor) on CodePen.

3. Get Element(s) By Multiple Tag Names

Using the querySelectorAll() method, get one or more elements by multiple tag names in a single query.

const boxes = document.querySelectorAll("div, span");
console.log(boxes); // NodeList[5]

Invoke the querySelectorAll() method on the document object.

Pass multiple tag names separated by a comma in quotes as an argument of the querySelectorAll() method.

In this case: div, span

Unlike the querySelectorAll() method, you’ll have to make two queries when using getElementsByTagName() to get the same result.

Try it out

See the Pen Get Element By Tag Name #3 by SoftAuthor (@softauthor) on CodePen.

4. Get Element(s) By Tag Name From Parent

Learn how to get one or more elements by tag name from a parent element.

Here is the HTML code wrapped with the section parent element.

<section>
  <div>div <br>box 1</div>
  <div>div <br>box 2</div>
  <div>div <br>box 3</div>
  <span>span <br>box 4</span>
  <span>span <br>box 5</span>
</section>

Now, let’s use the section parent element to get the child elements inside by tag name.

const sectionElements = document.getElementsByTagName("section");
console.log(sectionElements); //HTMLCollection

const boxSectionElement = sectionElements[0];

const boxes = boxSectionElement.querySelectorAll("div, span");

for(box of boxes) {
  box.style.border = "4px solid black"; // Apply border to div and span tags only
}

First, get all the section elements using getElementsByTagName() which returns HTMLCollection.

Assign it to a constant sectionElements.

Get the first section element using its index number and store it in a constant called boxSectionElement.

Then, invoke the querySelectorAll() on the boxSectionElement object passing div and span tags as arguments to target all the child elements.

Alternatively, you can also use the children property on the boxSectionElement to get all the child elements.

Finally, loop through them using for…of and set borders to the elements.

See the Pen Get Element By Tag Name #4 by SoftAuthor (@softauthor) on CodePen.