Работа с классами: classList.add, remove, toggle, contains

1. Почему управление классами — это важно?

Вспомните, как в CSS вы создаёте классы для разных стилей: .active, .hidden, .error, .success и так далее. А теперь представьте, что вы хотите по клику на кнопку подсветить элемент, скрыть его или добавить анимацию. Всё это делается изменением класса у элемента.

Раньше (и сейчас можно) классы меняли вот так:

element.className = "active";

или вот так:

element.className += " highlighted";

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

Что такое classList

classList — это специальное свойство DOM-элемента, которое позволяет удобно работать с классами. Оно ведёт себя почти как массив (но не совсем), и предоставляет готовые методы:

• .add() — добавить класс
• .remove() — убрать класс
• .toggle() — добавить, если нет, или убрать, если уже есть
• .contains() — проверить, есть ли класс

Посмотрите, как просто:

const button = document.getElementById('myButton');
button.classList.add('active'); // Добавить класс "active"
button.classList.remove('hidden'); // Убрать класс "hidden"
button.classList.toggle('selected'); // Переключить класс "selected"
console.log(button.classList.contains('active')); // true или false

Вот и вся магия!

3. Добавление класса: classList.add

Синтаксис

element.classList.add('имя_класса');

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

element.classList.add('highlighted', 'big', 'animated');

Пример

Допустим, у нас есть кнопка:

<button id="likeBtn">Лайкнуть</button>

И мы хотим, чтобы при клике на неё она становилась "лайкнутой" (например, красной):

.liked {
  background: red;
  color: white;
}

JS-код:

const btn = document.getElementById('likeBtn');
btn.addEventListener('click', function() {
  btn.classList.add('liked');
});

Внимание: Если класс уже есть, он не добавится второй раз — дублей не будет.

4. Удаление класса: classList.remove

Синтаксис

element.classList.remove('имя_класса');

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

element.classList.remove('highlighted', 'animated');

Пример

Допустим, нам нужно по клику убрать подсветку с элемента:

const card = document.getElementById('card');
card.classList.add('highlighted'); // сначала добавим

setTimeout(() => {
  card.classList.remove('highlighted'); // уберём через 2 секунды
}, 2000);

5. Переключение класса: classList.toggle

Это, пожалуй, самый любимый метод всех фронтендеров. Он работает как выключатель: если класс есть — убирает, если нет — добавляет.

Синтаксис

element.classList.toggle('имя_класса');

Можно передать второй аргумент (булевый), чтобы явно указать, надо добавить или убрать:

element.classList.toggle('имя_класса', true);  // обязательно добавить
element.classList.toggle('имя_класса', false); // обязательно убрать

Пример

Сделаем кнопку, которая по клику будет подсвечивать себя:

<button id="toggleBtn">Вкл/Выкл подсветку</button>

.active {
  background: gold;
}

const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', () => {
  toggleBtn.classList.toggle('active');
});

Каждый клик — класс "active" то появляется, то исчезает.

6. Проверка наличия класса: classList.contains

Иногда нужно узнать: "А есть ли у элемента такой класс?" Для этого есть .contains().

Синтаксис

element.classList.contains('имя_класса'); // true или false

Пример

if (toggleBtn.classList.contains('active')) {
  console.log('Кнопка активна!');
} else {
  console.log('Кнопка НЕ активна!');
}

7. Применяем classList в вашем приложении

Давайте продолжим развивать ваше учебное приложение. Допустим, у нас есть список задач:

<ul id="todoList">
  <li>Купить хлеб</li>
  <li>Позвонить другу</li>
  <li>Сделать домашку</li>
</ul>

Мы хотим, чтобы при клике на задачу она помечалась как выполненная (например, серым цветом и зачёркнутым текстом):

.done {
  color: #aaa;
  text-decoration: line-through;
}

JS-код:

const todoList = document.getElementById('todoList');
todoList.addEventListener('click', function(event) {
  // Проверяем, что клик был по <li>
  if (event.target.tagName === 'LI') {
    event.target.classList.toggle('done');
  }
});

Теперь при каждом клике задача становится выполненной или наоборот.

8. Особенности и нюансы работы с classList

Можно ли работать с несколькими классами сразу?
Да! Методы .add() и .remove() принимают несколько аргументов:

element.classList.add('one', 'two', 'three');
element.classList.remove('two', 'three');

Что будет, если добавить уже существующий класс?
Ничего страшного — класс просто не добавится второй раз. Ошибки не будет.

А если удалить несуществующий класс?
Тоже ничего — метод просто проигнорирует это действие.

Можно ли перебрать все классы элемента?
Да, classList похож на коллекцию:

for (let cls of element.classList) {
  console.log(cls);
}

А если хочется получить строку всех классов?
Можно так:

console.log(element.className); // строка с пробелами

Но лучше работать через classList для безопасности.

Можно ли заменить все классы разом?
Да, но только если присвоить строку:

element.className = "new-class another-class";

Осторожно: так вы удалите все предыдущие классы!

9. Типичные ошибки при работе с classList

Ошибка №1: Путаем classList и className.
element.classList — это объект с методами, а element.className — просто строка. Не пытайтесь делать element.classList += 'new' — это не сработает.

Ошибка №2: Передаём несколько классов одной строкой.
Вызов element.classList.add('one two') добавит один класс с именем "one two", а не два разных класса. Для нескольких классов пишите: element.classList.add('one', 'two').

Ошибка №3: Работаем с classList на старых элементах.
В IE9 и ниже (да-да, такие ещё встречаются в музеях) classList не поддерживается. Но в современных браузерах всё ок.

Ошибка №4: Ошибки в именах классов.
Если опечататься в названии класса, например, classList.add('acive') вместо 'active', ничего не произойдёт — класс не добавится, а вы будете долго искать ошибку.

Ошибка №5: Используем classList не на элементах.
Только DOM-элементы имеют свойство classList. Если вы случайно попытаетесь обратиться к нему на, например, коллекции элементов или на window/document — получите ошибку.