classList: add, remove, toggle, contains

classList — объект типа DOMTokenList, предоставляющий удобный API для добавления, удаления, переключения и проверки CSS-классов элемента без ручной работы со строкой className.

Зачем нужно

До classList изменение классов требовало разбора строки element.className вручную. classList делает операции с классами атомарными, безопасными (не затрагивает другие классы) и читаемыми. Это ключевой инструмент для реализации интерактивных UI-эффектов.

Где используется

Переключение активного состояния кнопок, вкладок, меню
Показ/скрытие элементов (active, hidden, visible)
Анимации через CSS-классы
Валидация форм (добавление классов ошибки/успеха)

Методы

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

// Добавить класс (игнорирует, если уже есть)
el.classList.add('active');
el.classList.add('highlighted', 'bordered'); // несколько сразу

// Удалить класс (игнорирует, если нет)
el.classList.remove('active');

// Переключить: добавить если нет, удалить если есть
el.classList.toggle('open');

// toggle с принудительным значением
el.classList.toggle('open', true);  // только добавить
el.classList.toggle('open', false); // только удалить

// Проверить наличие класса
el.classList.contains('active'); // true / false

// Заменить один класс другим
el.classList.replace('old-class', 'new-class');

// Все классы
console.log([...el.classList]); // ['card', 'active', ...]
console.log(el.classList.length);

Практические примеры

Аккордеон

document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', () => {
    const item = header.closest('.accordion-item');
    item.classList.toggle('expanded');
  });
});

Переключение темы

const btn = document.getElementById('theme-toggle');
btn.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
  const isDark = document.body.classList.contains('dark-theme');
  btn.textContent = isDark ? 'Светлая тема' : 'Тёмная тема';
});

Валидация поля

function validateInput(input) {
  const isValid = input.value.length >= 3;
  input.classList.toggle('input--error', !isValid);
  input.classList.toggle('input--success', isValid);
  return isValid;
}

Навигация: активная вкладка

const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('tab--active'));
    tab.classList.add('tab--active');
  });
});

Частые ошибки

Изменение className строкой вместо classList — перезаписывает все классы; легко случайно удалить нужные.
toggle с undefined вместо булева — второй аргумент должен быть явным true/false; передача undefined ведёт себя как обычный toggle.
Предположение, что contains принимает несколько классов — метод принимает только один класс за вызов.