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

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

Метод addClass()

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

// Добавление одного класса
$('.button').addClass('active');

// Добавление нескольких классов через пробел
$('.button').addClass('active highlighted');
  • Работает с набором элементов сразу.
  • Не добавляет дублирующийся класс, если он уже существует.

Применение: изменение состояния кнопок, подсветка активных элементов меню, динамическое добавление визуальных эффектов.

Метод removeClass()

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

// Удаление одного класса
$('.button').removeClass('active');

// Удаление нескольких классов через пробел
$('.button').removeClass('active highlighted');

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

  • Можно вызывать на множественных элементах одновременно.
  • Если класс отсутствует, метод не вызывает ошибок.

Используется для снятия активных состояний, скрытия элементов через CSS, удаления анимаций.

Метод toggleClass()

Метод toggleClass() сочетает в себе добавление и удаление класса. Если класс есть — он удаляется, если нет — добавляется.

// Переключение одного класса
$('.button').toggleClass('active');

// Переключение нескольких классов
$('.button').toggleClass('active highlighted');

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

// Принудительно добавить класс
$('.button').toggleClass('active', true);

// Принудительно удалить класс
$('.button').toggleClass('active', false);

Такой подход удобен для управления состояниями UI без необходимости проверять наличие класса вручную.

Метод hasClass()

Метод hasClass() проверяет наличие указанного класса у первого элемента в коллекции:

if ($('.button').hasClass('active')) {
  console.log('Класс active присутствует');
}

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

  • Возвращает true или false.
  • Используется для условного выполнения действий на основе текущего состояния элемента.

Цепочка методов и производительность

Dom7 позволяет использовать цепочки методов, что повышает читаемость и снижает количество обращений к DOM:

$('.button')
  .addClass('active')
  .removeClass('highlighted')
  .toggleClass('disabled');

Важно учитывать: Dom7 оптимизирован для работы с небольшими коллекциями элементов, поэтому массовое изменение большого количества узлов может потребовать дополнительной оптимизации, например, через документ-фрагменты или скрытие элементов перед манипуляцией.

Использование с динамическими элементами

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

const newButton = document.createElement('button');
newButton.className = 'button';
document.body.appendChild(newButton);

$('.button').last().addClass('active');

Это позволяет управлять стилями и состояниями даже для элементов, созданных через JavaScript на лету.

Практические сценарии применения

  • Меню и вкладки: переключение активного класса для визуального выделения выбранного пункта.
  • Кнопки: управление состояниями disabled, loading, active.
  • Анимации и эффекты: добавление или удаление классов для запуска CSS-анимаций.
  • Валидация форм: пометка полей с ошибками через добавление класса error.

Dom7 предоставляет простые и предсказуемые методы для управления классами, объединяя удобство jQuery с минимальным весом библиотеки и высокой производительностью при работе с современным DOM.

Оглавление