How do I target all index numbers in an array instead of just one?

Question

I have a line of Javascript that is meant find all the HTML elements with the class "OldClassName" and replace their class with "NewClassName" however this line of code only replaces the first instance in the resulting array because of index [0]. How would I replace all the instances of "OldClassName" at once?

document.getElementsByClassName("OldClassName")[0].className = "NewClassName";

user_6483121 · Answer

You can use querySelectorAll and loop over each selected element and change the class like below.

If you want to add use ele.classList.add() and similarly ele.classList.remove() to remove one.

(This one replaces all the class names with the new)

const elements = document.querySelectorAll(".old")
elements.forEach(ele => {
  ele.classList = "new"
})

.old {
  background: red;
}

.new {
  background: blue;
}

Hope this helps !

user_4017254 · Answer

One way could be with a simple loop:

let elements = document.getElementsByClassName("OldClassName");
for (let element of elements) {
    element.className = "NewClassName";
}

If you want to avoid removing any other classes on the element:

let elements = document.getElementsByClassName("OldClassName");
for (let element of elements) {
    element.classList.remove("OldClassName");
    element.classList.add("NewClassName");
}

user_1533592 · Answer

You can run for loop on the elements list length and change the class using classList and add, remove to change the class.

With the for loop you define an iterator i and then use that as your key to target each element in the list.

let className = document.querySelectorAll(".OldClassName");
for(let i = 0; i < className.length; i++){
   className[i].classList.add('NewClassName');
   className[i].classList.remove('OldClassName');
}
console.log(className);

Another way is to define your class in CSS and use toggle with a function. This would keep the old class and only add it on event handler and remove it on event handler.

function changeColor() {
  var element = document.querySelectorAll(".OldClassElement");
  for (let i = 0; i < element.length; i++) {
    element[i].classList.toggle("NewClassElement");
  }
}

.OldClassElement {
  color: red;
}

.NewClassElement {
  background-color: black;
  color: white;
}


  This is a DIV element.


  This is a DIV element.


  This is a DIV element.


  This is a DIV element.

user_6718740 · Answer

You can use a for loop to achieve this.

let classToChange = document.querySelectorAll(".oldClass");

for(let i = 0; i < classToChange.length; i++)
{
    classToChange[i].className = "newClass";
}

Note this will delete all other classes in the element. Several other answers address that as I type this edit out. :)

user_615274 · Answer

From MDN

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name (s)

In your case the relevant part is returns an array-like object of all child elements this means that in order to manipulate all these elements you must iterate on each one of them, as you have used the getElementsByClassName method you must iterate using for, but you can get the same result of elements using the document.querySelectorAll method but you have the advantage that you can use some methods of array like forEach in the example that makes your code more compact.

Please take a look at the following example

document.querySelector("button").addEventListener("click", toggle);

function toggle() {
  document
    .querySelectorAll(".old-class-name")
    .forEach((element) => element.classList.toggle("new-class-name"));
}

.old-class-name {
  font-weight: bold;
}

.new-class-name {
  font-weight: normal;
}


  Item 1
  Item 2
  Item 3
  Item 4
  Item 5

See

How do I target all index numbers in an array instead of just one?

5 Answers