¿Cómo cambiar todos los elementos de nombre de clase de un nombre de clase específico?
Quiero decir, digamos que tengo 3 divs con clases "MyClass", y quiero cambiar sus nombres de clase a "notMyClass" en JavaScript, ¿cómo hacerlo?
<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>
Sé que es muy fácil llamar al elemento por su id, pero ¿cómo hacerlo por su nombre de clase?
Seleccione todos los elementos con la clase MyClass
con querySelectorAll
, luego recorra cada elemento (con NodeList.forEach
) y 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>
Utilice el método querySelectorAll
:
Array.from(document.querySelectorAll('.MyClass')).forEach(elem => { elem.className = 'otherClass'; });
Tenga en cuenta que usé Array.from
, porque querySelectorAll devuelve una lista de nodos, no una matriz.