Добавление и удаление классов

Dom7 — это легковесная библиотека для работы с DOM, предоставляющая удобный синтаксис для манипуляций с элементами страницы. Одним из наиболее часто используемых инструментов являются методы работы с классами элементов: добавление, удаление и проверка наличия классов.

Добавление классов

Метод addClass() позволяет добавить один или несколько классов к выбранным элементам. Его синтаксис прост:

$$('.element').addClass('active');
$$('.element').addClass('class1 class2');

Особенности:

Можно передавать несколько классов через пробел.
Если класс уже присутствует на элементе, он не будет дублироваться.
Метод возвращает объект Dom7, что позволяет применять цепочку вызовов.

Пример добавления класса на клик:

$$('.button').on('click', function () {
  $$(this).addClass('clicked');
});

Этот код добавляет класс clicked только к тому элементу, по которому произошёл клик.

Удаление классов

Метод removeClass() удаляет один или несколько классов с выбранных элементов.

$$('.element').removeClass('active');
$$('.element').removeClass('class1 class2');

Особенности:

Если переданный класс отсутствует, метод игнорирует его без ошибок.
Так же, как и addClass(), возвращает объект Dom7 для цепочек вызовов.

Пример удаления класса при потере фокуса:

$$('input').on('blur', function () {
  $$(this).removeClass('focused');
});

Переключение классов

Метод toggleClass() позволяет добавить класс, если его нет, или удалить, если он присутствует.

$$('.element').toggleClass('active');

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

$$('.element').toggleClass('active', true);  // Добавляет класс
$$('.element').toggleClass('active', false); // Удаляет класс

Такой подход полезен для динамического управления состояниями элементов без проверки наличия класса через hasClass().

Проверка наличия класса

Метод hasClass() проверяет, содержит ли элемент указанный класс.

if ($$('.element').hasClass('active')) {
  console.log('Элемент активен');
}

Важно: при выборе нескольких элементов метод вернёт true, если хотя бы один элемент содержит класс.

Цепочки вызовов и комбинирование

Все методы работы с классами возвращают объект Dom7, что позволяет использовать цепочки:

$$('.item')
  .addClass('highlighted')
  .removeClass('dimmed')
  .toggleClass('selected');

Такой подход экономит количество обращений к DOM и делает код компактным и читаемым.

Примеры реального использования

Активное меню:

$$('.menu-item').on('click', function () {
  $$('.menu-item').removeClass('active');
  $$(this).addClass('active');
});

Форма с подсветкой поля:

$$('input').on('focus', function () {
  $$(this).addClass('focused');
}).on('blur', function () {
  $$(this).removeClass('focused');
});

Динамическое переключение состояний:

$$('.toggle-btn').on('click', function () {
  $$('.panel').toggleClass('open');
});