How to Get Elements by Class Name in JavaScript

John on September 11, 2020

Getting an element by its ID is easy with JavaScript, but what about getting elements by class name? In this tutorial, we will learn how.

Use getElementsByClassName()

To get an HTMLCollection of elements with a class use the getElementsByClassName() native JavaScript method.

<div class="container flex center">
  <div class="fruit apples"></div>
  <div class="fruit oranges"></div>
</div>

var elements = document.getElementsByClassName('fruit')

console.log(elements);

HTMLCollection(2) [div.fruit.apples, div.fruit.oranges]

You will notice that the JavaScript getElementsByClassName() method is plural unlike the singular getElementById(). The reason for this is because an ID should only be used once on an element in an HTML document while a class can be put on as many elements as needed.

That is why getElementsByClassName() will return an HTMLCollection, even if there is only one element with that class name.

Getting Elements from the HTMLCollection

An element in the HTMLCollection can be accessed in the same way as elements in an array by putting the index of the element inside [] (square brackets).

console.log(elements[0]);

<div class="fruit apples"></div>

Use the querySelectorAll() to Return a NodeList

querySelectorAll() works just like getElementsByClassName() except it returns a NodeList of elements with a class.

var first_element = document.querySelectorAll('.fruit')

console.log(first_element);

NodeList(2) [div.fruit.apples, div.fruit.oranges]

Get the First Element with a Class

The cleanest way of getting the first element with a class is to use the querySelector() method. It will return the first element with a class straight away.

var first_element = document.querySelector('.fruit')

console.log(first_element);

Get Child Elements with a Class

To get child elements with a class of a parent with an ID, chain getElementsByClassName() to the end of getElementById().

<div id="content-1" class="container flex center">
	<div class="fruit apples"></div>
	<div class="fruit oranges"></div>
</div>

<div id="content-2" class="container flex center">
	<div class="fruit apples"></div>
	<div class="fruit oranges"></div>
</div>

var elements = document.getElementById('content-1').getElementsByClassName('fruit')

console.log(elements);

HTMLCollection(2) [div.fruit.apples, div.fruit.oranges]

Get Elements with Multiple Class Names

To get elements that contain multiple classes, pass the list of classes into the getElementsByClassName() separated by   (spaces). It does not matter what order you put them in.

<div class="container flex center">
	<div class="fruit apples"></div>
	<div class="fruit oranges"></div>
</div>

var elements = document.getElementsByClassName('apples fruit')

console.log(elements);

HTMLCollection [div.fruit.apples]

Conclusion

You now know some different ways you can approach getting elements by class in JavaScript.