Зачем это нужно? Представьте: пользователь кликнул на кнопку, и нужно выделить какой-то блок другим цветом. Или при загрузке страницы требуется применить анимацию. Вместо того чтобы менять inline-стили (а это считается плохой практикой), вы просто добавляете класс, и CSS сделает всё остальное. Это чище, проще и удобнее для поддержки кода.

Что такое classList и как он работает

В JavaScript каждый элемент на странице имеет встроенное свойство classList — это специальный объект, который содержит все CSS-классы, присутствующие на элементе в данный момент. Представьте его как набор инструментов для управления этими классами без необходимости работать со строками напрямую.

Основное преимущество classList перед старым способом (когда нужно было менять свойство className вручную) — это безопасность и удобство. Если вы просто перезаписываете className, можете случайно удалить существующие классы. А classList позволяет добавлять, удалять и проверять классы без риска испортить то, что было раньше.

Теория хорошо, но давайте разберёмся с конкретным методом:

• classList.add() — добавляет один или несколько классов к элементу
• classList.remove() — удаляет классы
• classList.toggle() — переключает класс (добавляет, если его нет, удаляет, если есть)
• classList.contains() — проверяет наличие класса
• classList.replace() — заменяет один класс на другой

Синтаксис classList.add() и базовые примеры

Синтаксис метода очень простой и интуитивный. Вам нужно получить ссылку на элемент, а затем вызвать add() с именем класса в качестве аргумента. JavaScript выполняет инструкции последовательно сверху вниз, поэтому порядок имеет значение — сначала берётся элемент, потом к нему применяется метод.

Самый базовый пример выглядит так: вы находите элемент, и добавляете ему класс. Если класс уже существует у элемента, ничего не произойдёт — дубли не добавляются. Это удобно, потому что вам не нужно предварительно проверять, есть ли уже этот класс.

Вот как выглядит минимальный рабочий код:

const element = document.querySelector('div');
element.classList.add('animate');

Если в HTML было <div></div>, после выполнения кода получится <div class="animate"></div>.

Можно добавлять и несколько классов одновременно в одном вызове:

const element = document.querySelector('div');
element.classList.add('black', 'fade', 'animate');

Результат: <div class="black fade animate"></div>.

Важный момент: если вы попытаетесь добавить класс, который уже есть на элементе, ничего не случится. Браузер просто проигнорирует дублирующийся класс. Это защита от ошибок:

// Исходно: <p id="elem" class="www ggg zzz"></p>
let elem = document.querySelector('#elem');
elem.classList.add('zzz');
// Результат остаётся прежним: <p class="www ggg zzz"></p>

Практические применения в реальных проектах

Теория классная, но где это использовать? На самом деле, почти везде. Вот самые распространённые сценарии, которые встречаются в боевой разработке.

Одно из самых частых применений — это переключение тем оформления. Когда пользователь нажимает на кнопку «Тёмная тема», вы добавляете класс dark-theme к элементу body или html, и вся страница сразу перестраивается благодаря CSS-правилам, которые уже написаны. Никакого манипулирования inline-стилями, всё чисто и структурировано.

Другой популярный случай — показ и скрытие элементов на основе действий пользователя. Когда он кликает на кнопку меню, вы добавляете класс active к навигации, и она появляется (или анимируется). Когда кликает ещё раз, убираете класс — и меню закрывается. Всё управляется через CSS-переходы, а JavaScript только координирует.

Так же часто применяется при валидации форм. Когда пользователь вводит неправильный email, вы добавляете класс error к полю input, и CSS делает его красным с иконкой ошибки. Когда исправляет — удаляете класс.

Примеры конкретных сценариев:

• Обработка кликов: Добавьте класс selected к элементу при клике
• Загрузка данных: Пока данные загружаются, добавьте класс loading с анимацией спиннера
• Валидация форм: Если поле некорректно, добавьте класс invalid
• Навигация: Отмечайте активный пункт меню классом active
• Модальные окна: Добавляйте класс modal-open к body, чтобы убрать прокрутку
• Анимации: Добавляйте классы, которые запускают CSS-анимации

Сравнение методов управления классами

В JavaScript есть несколько способов работать с классами элемента. Все они решают одну задачу, но подходят для разных ситуаций. Давайте сравним основные:

Видите, что classList.add() — это базовый и безопасный инструмент. Его используют чаще всего, потому что он просто делает одно: добавляет класс, не трогая остальное. Если вам нужно переключать состояние (добавлять и удалять по очереди), лучше использовать toggle(). Если нужно проверить, есть ли уже класс, используйте contains().

Продвинутые техники и оптимизация

Если вы уже освоили базовый синтаксис, есть несколько продвинутых приёмов, которые помогут писать более чистый и эффективный код.

Одна из полезных техник — использование spread-оператора. Если у вас есть массив классов, которые нужно добавить, вместо цикла можно передать массив в add():

const classes = ['foo', 'bar', 'baz'];
const element = document.querySelector('div');
element.classList.add(...classes);

Это особенно удобно, когда список классов приходит динамически, например из API или конфигурации.

Ещё один способ оптимизации — использование toggle() с условием. Если вам нужно добавить класс, только если выполнено условие, а удалить, если нет, можно передать условие вторым аргументом:

const button = document.querySelector('button.submit');
const isActive = true;
button.classList.toggle('submit', isActive);
// Если isActive = true, класс добавится
// Если isActive = false, класс удалится

Полезные моменты при работе с classList:

• classList является итерируемым — вы можете пройтись по всем классам элемента через цикл for…of
• Методы работают с несколькими классами сразу — передавайте их через запятую
• Порядок классов не влияет на CSS — класс “foo bar” и “bar foo” будут иметь одинаковый результат
• classList.replace() позволяет заменить один класс на другой атомарно (ES2015+)
• classList.contains() полезна для условной логики** — проверяйте наличие перед добавлением, если это критично

Что ещё стоит узнать об управлении классами

Мы разобрались с classList.add() и понимаем, как его использовать в большинстве ситуаций. Но тема управления классами намного шире, и есть моменты, которые стоит иметь в виду при проектировании своих скриптов.

Например, не все браузеры одинаково быстро работают с DOM. Если вы добавляете классы к большому количеству элементов в цикле, это может замедлить страницу. Опытные разработчики иногда используют batch-обновления — группируют все изменения в один момент времени, чтобы браузер не перестраивал макет после каждого добавления класса.

Также полезно помнить про CSS-селекторы и специфичность. Когда вы добавляете класс, убедитесь, что CSS-правила для этого класса имеют достаточную специфичность, чтобы переопределить существующие стили. Иначе класс добавится, но визуально ничего не изменится, что может озадачить при отладке.

Ещё один момент — производительность. Если вы работаете с инструментами вроде React или Vue, они уже имеют встроенные механизмы для управления классами (директивы :class в Vue или className в React). Использование classList напрямую вместе с фреймворком может привести к конфликтам. В таких случаях используйте инструменты фреймворка, а не манипулируйте DOM вручную.