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

Bliss.js — легковесная библиотека для работы с DOM, предоставляющая удобные методы для манипуляций с элементами, включая работу с классами. Один из ключевых аспектов управления стилями и поведением элементов — проверка наличия определённых классов. В отличие от чистого JavaScript, где для этого приходится использовать classList.contains, Bliss.js упрощает этот процесс через лаконичные методы.

Метод hasClass

Метод hasClass используется для проверки, содержит ли элемент заданный CSS-класс. Его синтаксис:

element.hasClass(className)
  • element — объект DOM, обёрнутый Bliss.js или выбранный через Bliss.$.
  • className — строка с именем класса, наличие которого нужно проверить.
  • Возвращает true, если класс присутствует, и false, если отсутствует.

Пример:

var button = Bliss.$('#myButton');

if (button.hasClass('active')) {
    console.log('Кнопка активна');
} else {
    console.log('Кнопка неактивна');
}

В этом примере hasClass проверяет, есть ли у кнопки класс active. Такая проверка особенно полезна при условных операциях с элементами: изменение стиля, переключение состояния или запуск анимации.

Проверка нескольких классов одновременно

Bliss.js позволяет проверять наличие нескольких классов с помощью перебора:

var classesToCheck = ['highlight', 'selected', 'visible'];

classesToCheck.forEach(function(cls) {
    if (button.hasClass(cls)) {
        console.log('Элемент содержит класс:', cls);
    }
});

Этот подход позволяет динамически работать с группой классов, избегая многократного дублирования кода.

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

Bliss.js поддерживает работу с коллекциями элементов, выбранных через селектор. При этом метод hasClass можно применять к каждому элементу через forEach или встроенный метод each:

Bliss.$$('.menu-item').forEach(function(item) {
    if (item.hasClass('active')) {
        item.style.fontWeight = 'bold';
    }
});

Здесь перебираются все элементы с классом menu-item, и каждому активному элементу применяется дополнительный стиль.

Сочетание с другими методами работы с классами

Bliss.js предлагает методы addClass, removeClass и toggleClass, которые удобно комбинировать с hasClass для создания условной логики:

var box = Bliss.$('#box');

if (!box.hasClass('visible')) {
    box.addClass('visible');
} else {
    box.removeClass('visible');
}

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

Оптимизация проверок

Bliss.js оптимизирован для быстрого доступа к классам без необходимости напрямую обращаться к classList. Проверки hasClass выполняются мгновенно даже для больших DOM-структур. Для сложных условий можно использовать цепочки:

var formFields = Bliss.$$('#form input');

formFields.forEach(function(field) {
    if (field.hasClass('required') && !field.hasClass('valid')) {
        field.style.borderColor = 'red';
    }
});

Это позволяет проверять несколько условий одновременно и сразу применять визуальные подсказки пользователю.

Особенности работы с динамически добавленными элементами

Если элементы создаются динамически через методы Bliss.js (Bliss.$create или клонирование элементов), проверка классов остаётся корректной:

var newItem = Bliss.$create('div', { class: 'item new' });

if (newItem.hasClass('new')) {
    console.log('Элемент только что создан');
}

Метод hasClass реагирует на текущие классы элемента независимо от того, был ли он добавлен в DOM.

Примеры практического применения

  1. Переключение активного состояния меню
Bliss.$$('.menu-item').forEach(function(item) {
    item.on('click', function() {
        if (!item.hasClass('active')) {
            Bliss.$$('.menu-item').forEach(i => i.removeClass('active'));
            item.addClass('active');
        }
    });
});
  1. Валидация форм
Bliss.$$('#form input').forEach(function(input) {
    if (input.hasClass('required') && input.value.trim() === '') {
        input.addClass('error');
    }
});
  1. Анимации элементов
var panel = Bliss.$('#panel');

if (!panel.hasClass('open')) {
    panel.addClass('open');
    panel.style.height = '200px';
}

Метод hasClass в этих сценариях становится ключевым инструментом для создания интерактивного и отзывчивого интерфейса без сложных проверок и громоздких условий.

Оглавление