How To Change All Classname Elements Of Specific Classname

How to change all classname elements of specific classname? I mean, let's say I have 3 divs with classes 'MyClass', and i want to change their classnames to 'notMyClass' in JavaScr

Solution 1:

Select all elements with the MyClass class with querySelectorAll, then loop through each element (with NodeList.forEach) and use classList.replace:

document.querySelectorAll('.MyClass').forEach(e => e.classList.replace('MyClass', 'notMyClass'))

.notMyClass{
  background-color:green;
}

<div class="MyClass">A</div><div class="MyClass">B</div><div class="MyClass">C</div>

<!--TO-->

<div class="notMyClass">D</div><div class="notMyClass">E</div><div class="notMyClass">F</div>

Solution 2:

Use querySelectorAll method:

Array.from(document.querySelectorAll('.MyClass')).forEach(elem => {
  elem.className = 'otherClass';
});

Note that I used Array.from, because querySelectorAll returns a NodeList, not an array.