How to Add a Class to Multiple Elements in JavaScript

To add a class to multiple elements in JavaScript:

  1. Get a list of all the elements with a method like document.querySelectorAll().
  2. Iterate over the list with forEach().
  3. For each element, call classList.add(class) to add the class to each element.

i.e.:

JavaScript
const elements = document.querySelectorAll('.class'); elements.forEach((element) => { element.classList.add('class'); });

For example:

HTML
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <button id="add">Add class</button>
CSS
.bold { font-weight: bold; } .big { font-size: 1.2em; }
JavaScript
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big'); });

This will be the HTML after the button is clicked.

HTML
<p class="big bold text">Coding</p> <p class="big bold text">Beauty</p> <p class="big bold text">Dev</p> <button id="add">Add class</button>
The big class to the paragraph elements when the button is clicked.
The big class to the p elements when the button is clicked.

We use the document.querySelectorAll() method to select all DOM elements to which we want to add the class.

We loop through the elements in the list object with its forEach() method. This forEach() method works much like Array forEach().

document.getElementsByClassName() method

We can use the document.getElementsByClassName() method in place of document.querySelectorAll() when the selector is a class selector. For getElementsByClassName(), we pass the class name without the . (dot), and we use Array.from() to convert the result to an array before the iteration with forEach().

JavaScript
const elements = Array.from(document.getElementsByClassName('text')); elements.forEach((element) => { element.classList.add('big'); });

Note: Unlike the querySelectorAll() method, getElementByClassName() returns a live list of HTML Elements; changes in the DOM will reflect in the array as the changes occur. If an element in the array no longer qualifies for the selector specified in getElementsByClassName(), it will be removed automatically. This means that one iteration of the list could be different from another, even without any direct modifications to the list.

classList.add() method

We use the classList.add() method to add a class to each of the elements.

You can add multiple classes by passing more arguments to add().

JavaScript
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.add('big', 'blue'); });

If any of the classes passed to add() already exists on the element, add() will ignore this, instead of throwing an error.

Add class to elements with different selectors

Sometimes there is no common selector between the elements that you want to add the class to. For such a case, you can pass multiple comma-separated selectors to the querySelectorAll() method.

JavaScript
const elements = document.querySelectorAll('.class-1, #id-1, tag-1'); elements.forEach((element) => { element.classList.add('class'); });

For example:

HTML
<p class="bold text">Coding</p> <p class="bold text">Beauty</p> <p class="bold text">Dev</p> <div id="box-1">English</div> <div>Spanish</div> <div id="box-2">French</div> <br /> <button id="add">Add class</button>
CSS
.bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; }
JavaScript
const elements = document.querySelectorAll('.text, #box-1, #box-2'); const addButton = document.getElementById('add'); addButton.addEventListener('click', () => { elements.forEach((element) => { element.classList.add('italic', 'underline'); }); });
Classes are added to elements with different selectors on button click.
Classes are added to elements with different selectors on button click.

Remove class from multiple elements

Just as the classList.add() adds one or more classes to an element, the classList.remove() removes one or more classes from an element.

So we can use it in a forEach() loop to a class to multiple DOM elements.

JavaScript
const elements = document.querySelectorAll('.text'); elements.forEach((element) => { element.classList.remove('big', 'bold'); });


11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

2 thoughts on “How to Add a Class to Multiple Elements in JavaScript”

  1. This was very helpful. I couldn’t get my code to work for querySelectorAll but your example led me on the right path. Thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *