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