Get Elements by multiple Class Names using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 03 20222 min read

Get Elements by multiple Class Names using JavaScript #

Use the getElementsByClassName method to get elements by multiple class names, e.g. document.getElementsByClassName('box green'). The method returns an array-like object containing all of the elements which have all of the given class names.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .green { background-color: greenyellow; } .orange { background-color: orange; } </style> </head> <body> <div class="box green">Box 1</div> <div class="box green">Box 2</div> <div class="box orange">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
// โœ… Get all elements with classes `box` AND `green` const elements1 = document.getElementsByClassName('box green'); console.log(elements1); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green] // โœ… Get all elements with classes `box` AND `green` const elements2 = document.querySelectorAll('.box.green'); console.log(elements2); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green] // โœ… Get all elements with at least one of classes `box` or `green` const elements3 = document.querySelectorAll('.box, .green'); // ๐Ÿ‘‡๏ธ [div.box.green, div.box.green, div.box.orange] console.log(elements3);
If you need to get the first element that matches the selector, use the querySelector method instead of querySelectorAll.

We used the document.getElementsByClassName method in the first example.

The method takes one or more class names as parameter and returns an HTMLCollection with the elements that contain all of the provided class names.

If you need to treat the HTMLCollection as an array, e.g. to use methods like forEach(), you would have to convert it to an array first.

index.js
const elements1 = Array.from( document.getElementsByClassName('box green') ); elements1.forEach(element => { console.log(element); });

The second example uses the document.querySelectorAll method to get the elements that have the classes box and green.

index.js
// โœ… Get all elements with classes `box` AND `green` const elements2 = document.querySelectorAll('.box.green'); console.log(elements2); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green]

The method takes one or more CSS selectors as a parameter and returns a NodeList containing the elements that match the selectors.

If you need to get the first element that has the classes box and green, use the querySelector method instead.

index.js
// โœ… Get all elements with classes `box` AND `green` const elements2 = document.querySelector('.box.green'); console.log(elements2); // ๐Ÿ‘‰๏ธ div.box.green
The third example uses the querySelectorAll method to get the elements that have at least one of the classes box and green.
index.js
// โœ… Get all elements with at least one of classes `box` or `green` const elements3 = document.querySelectorAll('.box, .green'); console.log(elements3); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green, div.box.orange]

You can pass as many comma-separated selectors to the querySelectorAll method as necessary.

You can also select the elements that have one of the classes but not the other.

index.js
const elements4 = document.querySelectorAll( '.box:not(.orange)' ); console.log(elements4); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green]

The example above selects the elements that have a class of box, but don't have the class of orange.

Note that you can also narrow the results down, by adding a specific tag name to the selector.

index.js
// โœ… Get all DIV elements with classes `box` AND `green` const elements5 = document.querySelectorAll('div.box.green'); console.log(elements5); // ๐Ÿ‘‰๏ธ [div.box.green, div.box.green]

The example above shows how to get all div elements that have both classes - box and green.

This selector would not match any span or p elements that have the classes.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee