Add a class to multiple Elements using JavaScript

# Add a class to multiple Elements using JavaScript

To add a class to multiple elements:

Select the elements using the document.querySelectorAll() method.
Use a for...of loop to iterate over the collection of elements.
Use the classList.add method to add a class to each element.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">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!
const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  box.classList.add('bg-yellow');
}

add class multiple elements

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all elements with a class of box.

You could also use the document.getElementsByClassName method to achieve the same result.

index.js

Copied!
const boxes = document.getElementsByClassName('box');

for (const box of boxes) {
  box.classList.add('bg-yellow');
}

add class to multiple elements

The getElementsByClassName method takes a class as a parameter and returns a collection containing the elements with the given class.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we use the classList.add() method to add a class to the element.

If the class is already present on the element, it won't get added twice.

# Adding multiple classes to multiple elements

You can pass as many classes to the add() method as necessary.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  box.classList.add(
    'bg-yellow',
    'second-class',
    'third-class'
  );
}

adding multiple classes to multiple elements

The code for this article is available on GitHub

Similarly, if you need to remove one or more classes, you can use the classList.remove() method.

index.js

Copied!
const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  box.classList.add(
    'bg-yellow',
    'second-class',
    'third-class'
  );

  box.classList.remove(
    'second-class',
    'third-class'
  );
}

If any of the classes don't exist on the element, they get ignored.

# Add class to elements with multiple, different selectors

The querySelectorAll method takes one or more selectors, so we are able to select elements with multiple different classes, ids, etc.

Here is an example that uses the method to get a collection of elements with 3 different classes.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">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!
const boxes = document.querySelectorAll('.box1, .box2, .box3');

for (const box of boxes) {
  box.classList.add('bg-yellow', 'second-class', 'third-class');

  box.classList.remove('second-class', 'third-class');
}

The code for this article is available on GitHub

We passed 3 different selectors to the querySelectorAll method by separating them with commas.

You could pass an id to a method by prefixing the id value with a #, e.g. #my-id.

# Add a class to multiple Elements using forEach()

The previous code samples used the for...of loop to add a class to multiple elements, however, you can also use the NodeList.forEach() method.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">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!
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.classList.add('bg-yellow');
});

The code for this article is available on GitHub

The function we passed to the NodeList.forEach() method gets called with each element in the list.

On each iteration, we use the classList.add() method to add a class to the element.

An important thing to note is that we used the querySelectorAll method to select the DOM elements.

The querySelectorAll method returns a NodeList, whereas the getElementsByClassName method returns an HTMLCollection.

If you use the getElementsByClassName method, convert the collection to an array before calling forEach().

index.js

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

boxes.forEach(box => {
  box.classList.add('bg-yellow');
});

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

We had to convert the HTMLCollection to an array to be able to use the Array.forEach() method.

The for...of loop from the previous examples can be used with any iterable, including NodeLists, HTMLCollections and arrays.

# 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.

Add a class to multiple Elements using JavaScript