Get Elements by multiple Class Names using JavaScript

# Get Elements by multiple Class Names using JavaScript

Use the getElementsByClassName method to get elements by multiple class names.

The method returns an array-like object containing all the elements that have all of the given class names.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ 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 the classes
const elements3 = document.querySelectorAll('.box, .green');
// 👇️ [div.box.green, div.box.green, div.box.orange]
console.log(elements3);

get elements by multiple class names

The code for this article is available on GitHub

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.

index.js

Copied!
// ✅ Get all elements with classes `box` AND `green`
const elements1 = document.getElementsByClassName('box green');
console.log(elements1); // 👉️ [div.box.green, div.box.green]

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

# Converting the collection to an array

If you need to treat the HTMLCollection as an array, e.g. to use methods like forEach(), convert it to an array by using the Array.from() method.

index.js

Copied!
const elements1 = Array.from(
  document.getElementsByClassName('box green')
);

elements1.forEach(element => {
  console.log(element);
});

converting the collection to an array

The code for this article is available on GitHub

The Array.from() method creates a new, shallow-copied array from the provided iterable.

# Get Elements by multiple Class Names using querySelectorAll

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

index.js

Copied!
// ✅ Get all elements with classes `box` AND `green`
const elements2 = document.querySelectorAll('.box.green');
console.log(elements2); // 👉️ [div.box.green, div.box.green]

get elements by multiple class names using queryselectorall

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

# Get the first element that has multiple class names

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

index.js

Copied!
// ✅ Get the first element with classes `box` AND `green`
const elements2 = document.querySelector('.box.green');
console.log(elements2); // 👉️ div.box.green

get the first element that has multiple class names

The code for this article is available on GitHub

# Get the elements that have at least one of multiple classes

The third example uses the querySelectorAll method to get the elements that have at least one of the classes box and green.

index.js

Copied!
// ✅ 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]

get the elements that have at least one of multiple classes

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

# Get the elements that have one class but not the other

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

index.js

Copied!
const elements4 = document.querySelectorAll(
  '.box:not(.orange)'
);
console.log(elements4); // 👉️ [div.box.green, div.box.green]

get the elements that have one class but not the other

The code for this article is available on GitHub

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

# Narrow the results down

You can also narrow the results down by adding a specific tag name to the selector.

index.js

Copied!
// ✅ 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]

narrowing the results down

The example 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 same classes.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get Elements by multiple Class Names using JavaScript