- Instant help with your JavaScript coding problems

Add class to multiple elements in JavaScript

Question:
How to add class to multiple elements in JavaScript?
Answer:
const elementList = document.querySelectorAll('li');

elementList.forEach(el => el.classList.add('new-class'));
Description:

To add a CSS class to multiple HTML elements then you need to collect all of them first. You can do this using the querySelectorAll method with the appropriate search query. For example to find all list items you can use the following code:

const listItems = document.querySelectorAll('li');

The next step is to iterate through the list. This can easily be done with forEach .

listItems.forEach( ... );

After that, you only need to expand the classList property of the current element in each iteration. The new CSS class can be added to the list using the add method.

listItems.forEach(item => item.classList.add('new-class'));

 

Reference:
querySelectorAll
Returns a static NodeList representing a list of the document's elements that match the specified group of selectors.
JavaScript:
querySelectorAll(selectors)
TypeScript:
querySelectorAll(selectors: K): NodeListOf;
Examples:
const items = document.querySelectorAll(".highlighted > p");
forEach
Executes a provided function once for each array element.
JavaScript:
forEach((element) => { /* … */ })
TypeScript:
forEach(callbackfn: (value: Node, key: number, parent: NodeList) => void, thisArg?: any): void;
Examples:
const items = [1, 2, 3];

items.forEach((item) => {
  console.log(item * 2);
});
Share "How to add class to multiple elements in JavaScript?"