Using "classList", you can add or remove a class without affecting any others the element may have. But if you assign "className", it will wipe out any existing classes while adding the new one (or if you assign an empty string it will wipe out all of them).

Assigning "className" can be a convenience for cases where you are certain no other classes will be used on the element, but I would normally use the "classList" methods exclusively.

And "classList" also has handy "toggle" and "replace" methods.

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

ClassList as the name suggest is the list of classes in an element.

If you have multiple classes on an element and you want to add/remove one without altering the rest you should use classList.

classList also provides methods like toggle which are really useful.

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>

I have just known one thing difference between className and classList. className returns string within they are names of the current element and classList also returns names but as an array.