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