Usando "classList", puede agregar o eliminar una clase sin afectar a ninguna otra que pueda tener el elemento. Pero si asigna "className", eliminará las clases existentes mientras agrega la nueva (o si asigna una cadena vacía, las eliminará todas).

Asignar "className" puede ser conveniente para los casos en los que está seguro de que no se usarán otras clases en el elemento, pero normalmente usaría los métodos "classList" exclusivamente.

Y "classList" también tiene prácticos métodos de "alternar" y "reemplazar".

https://teamtreehouse.com/community/difference- between-classlist-and-classname

ClassList como sugiere el nombre es la lista de clases en un elemento.

Si tiene varias clases en un elemento y desea agregar/eliminar una sin alterar el resto, debe usar classList .

classList también proporciona métodos como toggle que son realmente útiles.

 function toggleClass(){ let txt = document.querySelector("h2"); txt.classList.toggle("changebg"); }

 .font-style { font-family: sans-serif; } .changebg { background-color: lightcoral; }

 <h2 class="font-style" >Hello World!</h2> <button onclick='toggleClass()'>Toggle Background Class</button>

Acabo de saber una diferencia entre className y classList. className devuelve una cadena dentro de la cual se encuentran los nombres del elemento actual y classList también devuelve nombres pero como una matriz.