Как добавить или убрать класс у элемента в JavaScript через classList?

Для работы с классами есть удобный объект classList с методами add, remove, toggle, contains.

const el = document.querySelector('.box');

el.classList.add('active');       // добавить класс
el.classList.remove('active');    // убрать класс
el.classList.toggle('active');    // есть — убрать, нет — добавить
el.classList.contains('active');  // true/false — есть ли класс

Классический сценарий — переключение по клику:

const btn = document.querySelector('#btn');
const box = document.querySelector('.box');
btn.addEventListener('click', () => {
  box.classList.toggle('active');
});

toggle особенно удобен — не надо вручную проверять, есть класс или нет.

Почему не className: className — это вся строка классов целиком. Присваивая ей, ты затираешь все остальные классы:

// у элемента было class="box rounded"
el.className = 'active'; // стало просто class="active" — box и rounded потеряны!

classList.add('active') же аккуратно дописывает класс, не трогая существующие. Поэтому в новом коде почти всегда берут classList.

Можно добавить/убрать сразу несколько:

el.classList.add('active', 'visible');
el.classList.remove('hidden', 'old');