How to change all classname elements of specific classname

Question

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 JavaScript, how to do it?

<div class="MyClass">
</div>
<div class="MyClass">
</div>
<div class="MyClass">
</div>

<!--TO-->

<div class="notMyClass">
</div>
<div class="notMyClass">
</div>
<div class="notMyClass">
</div>

I know that it's very easy by calling element by it's id, but how to do it by it's classname?

Answer 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>

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