Skip to main content

How to Get Elements by Multiple Class Names in JavaScript

When working with the DOM, you often need to select elements based on combinations of CSS classes. For example, you might need to find all elements that have both class-a and class-b, or elements that have either class-a or class-b. The modern and most powerful tool for all of these scenarios is document.querySelectorAll().

This guide will teach you how to use querySelectorAll() with CSS selectors to find elements based on "AND", "OR", and "NOT" logic for their class names.

The Core Method: querySelectorAll()​

The querySelectorAll() method is the "Swiss Army knife" of DOM selection. It takes a CSS selector string as an argument and returns a static NodeList containing all elements that match the selector. By crafting the right selector, you can perform complex multi-class queries.

We will use this structure for our examples.

<div class="box green active">Box 1</div>
<div class="box green">Box 2</div>
<div class="box orange">Box 3</div>
<span class="green">Span 4</span>

Scenario 1: Selecting Elements with ALL of the Given Classes (AND Logic)​

This is the most common requirement: finding elements that have multiple specific classes at the same time.

Problem: we need to find all elements that have both the box class AND the green class.

Solution: you can achieve this by chaining the class selectors together without any spaces. The selector .box.green means "find elements that have a class of box AND a class of green."

// Get all elements with class "box" AND "green"
const boxAndGreen = document.querySelectorAll('.box.green');

console.log(boxAndGreen.length); // Output: 2
// (It finds the first two <div>s)

Scenario 2: Selecting Elements with ANY of the Given Classes (OR Logic)​

Sometimes, you need to select elements that match any one of a list of classes.

Problem: we need to find all elements that have either the orange class OR the active class.

Solution: you can achieve this by separating your selectors with a comma. The selector .orange, .active means "find elements that have the class orange OR elements that have the class active."

// Get all elements with class "orange" OR "active"
const orangeOrActive = document.querySelectorAll('.orange, .active');

console.log(orangeOrActive.length); // Output: 2
// (It finds the div with class "active" and the div with class "orange")

Scenario 3: Selecting Elements with One Class but NOT Another​

For more advanced filtering, you can use the :not() pseudo-class to exclude elements that have a specific class.

Problem: we need to find all elements that have the box class but do NOT have the green class.

Solution: the selector .box:not(.green) means "find elements with the class box that do NOT also have the class green."

// Get all elements with class "box" but NOT "green"
const boxButNotGreen = document.querySelectorAll('.box:not(.green)');

console.log(boxButNotGreen.length); // Output: 1
// (It finds only the div with the class "orange")

A Note on the Older getElementsByClassName Method​

Before querySelectorAll was common, the getElementsByClassName() method was used. It can accept multiple class names separated by spaces, but it only supports the "AND" logic.

// This is equivalent to querySelectorAll('.box.green')
const elements = document.getElementsByClassName('box green');
console.log(elements.length); // Output: 2

Limitations:

  • It cannot perform "OR" or "NOT" queries.
  • It returns a live HTMLCollection, which can have performance implications and lacks modern methods like forEach.

For these reasons, querySelectorAll is the recommended best practice in modern web development for its power, flexibility, and consistency.

Conclusion​

The querySelectorAll() method provides a single, powerful interface for selecting elements by any combination of class names.

  • To find elements with ALL specified classes (AND), chain the selectors: .class1.class2
  • To find elements with ANY specified class (OR), separate the selectors with a comma: .class1, .class2
  • To exclude elements with a certain class, use the :not() pseudo-class: .include:not(.exclude)

By mastering these simple CSS selector patterns, you can handle any multi-class selection task with ease.

Table of Contents