Как работать с классами элемента?

Управление классами CSS в JavaScript является ключевым инструментом для создания динамических пользовательских интерфейсов, анимаций и смены тем оформления. Самым современным, удобным и эффективным способом работы с классами выступает свойство classList, которое представляет собой специальный объект DOMTokenList.

Объект classList предоставляет богатый набор методов для точечного изменения классов элемента. Метод classList.add('className') добавляет один или несколько новых классов к элементу, если их там еще нет. Метод classList.remove('className') удаляет указанный класс, позволяя легко скрывать элементы или сбрасывать состояния. Универсальный метод classList.toggle('className') работает как переключатель: если класс у элемента есть — он удаляется, если нет — добавляется. Это крайне удобно для реализации выпадающих меню, модальных окон или переключения тем.

Для проверки наличия конкретного класса используется метод classList.contains('className'), возвращающий логическое true или false, что незаменимо в условных конструкциях. А метод classList.replace(oldClass, newClass) позволяет заменить один существующий класс на новый за один оператор, что избавляет от необходимости писать комбинации из remove и add.

Исторический подход предполагал использование свойства className, которое возвращает или устанавливает всю строку классов элемента целиком. Работать с className менее удобно, так как при изменении одного класса приходится вручную парсить и склеивать всю строку целиком, чтобы не затереть остальные стили. В отличие от него, classList избавляет от этих проблем, позволяя управлять каждым классом изолированно и безопасно.

Например, чтобы реализовать интерактивную кнопку "лайк", достаточно повесить на неё обработчик событий, который будет вызывать el.classList.toggle('is-active'). Это делает код минималистичным, читаемым и легко поддерживаемым в любых проектах.