Метод classList.add делает это безопасно и удобно. Он не перезаписывает существующие классы, а добавляет новые. Зачем это нужно? Чтобы избежать ошибок с дубликатами и поддерживать чистый код в проектах любого размера.

Основной метод: classList.add()

Объект classList — это стандартный способ работы с классами в современном JavaScript. Метод add позволяет добавить один или несколько классов к элементу за один вызов. Если класс уже есть, ничего не меняется — дубли не создаются. Это делает код надежным для повторных вызовов.

Представьте кнопку, которую нужно подсветить при клике. Вы находите элемент через querySelector, вызываете classList.add(‘active’), и CSS-селектор .active применяется мгновенно. Логика простая: получаем элемент, добавляем класс, стили обновляются. Такой подход работает во всех браузерах без проблем совместимости.

• Синтаксис: element.classList.add('класс1', 'класс2'); — добавляет сразу несколько классов.
• Пример с одним классом:

  let btn = document.querySelector('#myButton');
  btn.classList.add('highlight');
  

  Результат: элемент получит class=“… highlight”.
• Пример с несколькими: btn.classList.add('visible', 'animated'); — оба класса применятся без конфликтов.
• Нюанс: Метод игнорирует дубли, так что add('active') дважды — это безопасно.

Альтернатива через className

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

При клике на элемент nav вы можете сделать его “липким” для скролла. Получаете className, проверяете наличие класса ‘sticky’, добавляете если нужно, и обновляете атрибут. Это гибко, но вручную приходится фильтровать пустые строки. В отличие от classList, здесь легко сломать разметку лишним пробелом.

• Базовый пример:

  let elem = document.getElementById('nav');
  elem.className += ' sticky';
  

• С проверкой дублей:

  function addClassSafe(el, cls) {
    if (!el.className.includes(cls)) {
      el.className += ' ' + cls;
    }
  }
  

• Разбиение на массив: el.className.split(' ').filter(Boolean).push(cls).join(' ');.
• Важно: Всегда очищайте пустые строки с помощью filter(Boolean).

Работа с атрибутом через setAttribute

Метод setAttribute полностью заменяет атрибут class. Чтобы добавить класс, сначала получаете текущее значение, парсите его, добавляете новый и записываете обратно. Это полезно в скриптах, где нужно полное управление атрибутами.

Допустим, модальное окно нужно показать с классом ‘visible’. Вы берете getAttribute(‘class’), разбиваете на массив, проверяете наличие, добавляете и вызываете setAttribute. Такой подход хорош для сложной логики, но verbose. В реальных проектах комбинируйте с функциями для переиспользования.

• Простой пример:

  let modal = document.querySelector('#modal');
  let classes = modal.getAttribute('class') + ' visible';
  modal.setAttribute('class', classes);
  

• С фильтрацией:

  function addWithAttr(el, cls) {
    let arr = el.getAttribute('class')?.split(' ') || [];
    if (!arr.includes(cls)) arr.push(cls);
    el.setAttribute('class', arr.join(' '));
  }
  

• Совет: Используйте опциональную цепочку ?. для безопасности.

Практические примеры и комбинации

В реальных задачах классы добавляются по событиям: клик, скролл или таймер. Комбинируйте add с toggle для переключения состояний. Например, при клике на кнопку меню добавьте ‘open’ к навбару — и CSS анимация сделает остальное.

Для модалки: слушатель на кнопку, querySelector для окна, classList.add(‘show’). Добавьте обработку закрытия с remove. Это базовый паттерн для интерактивных элементов. Тестируйте в консоли: создайте div, добавьте классы и смотрите изменения в инспекторе.

• Toggle для переключения:

  btn.addEventListener('click', () => {
    elem.classList.toggle('active');
  });
  

• Проверка наличия: if (elem.classList.contains('cls')) { ... }.
• Несколько элементов: document.querySelectorAll('.item').forEach(el => el.classList.add('processed'));.
• Нюанс: forEach на NodeList работает идеально.

Методы для старых браузов и fallback

Не все проекты на свежем JS — иногда нужен полифилл. Пишите функцию, которая сначала пробует classList, а если нет — fallback на className. Это обеспечивает кросс-браузерность без библиотек вроде jQuery.

Проверьте if (element.classList), и если да — add, иначе вручную. Такой fallback спасает в legacy-коде. В новых проектах classList поддерживается везде, но привычка к проверкам не помешает. Тестируйте в старых версиях Chrome или IE.

function universalAdd(el, cls) {
  if (el.classList) {
    el.classList.add(cls);
  } else {
    if (!el.className.includes(cls)) {
      el.className += ' ' + cls;
    }
  }
}

• Плюсы: Работает везде.
• Минусы: Больше кода.
• Совет: В продакшене используйте Babel для транспиляции.

За пределами простого добавления

Добавление классов — часть экосистемы манипуляций с DOM. Есть remove, toggle, replace. Думайте о состояниях: hover, focus, loading. CSS Modules или Tailwind упрощают именование классов в больших apps.

Останавливайтесь на classList для 90% случаев, но знайте альтернативы для edge-кейсов. Подумайте о производительности при массовом добавлении — batch-обновления лучше. В SPA-фреймворках вроде React это абстрагировано, но понимание основ ускорит отладку.