Выборка по классу

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

Синтаксис выборки по классу

Основной метод для выборки элементов — вызов функции u() с CSS-селектором. Для поиска элементов по классу используется точка (.) перед именем класса:

u('.example')

Здесь '.example' — это селектор CSS, и результатом будет объект Umbrella, содержащий все элементы с классом example. Этот объект обладает методами для работы с множественными элементами одновременно.

Особенности работы с множественными элементами

Возвращаемый объект Umbrella позволяет перебирать все выбранные элементы, применять к ним изменения стилей, атрибутов, обработчики событий и другие методы:

u('.highlight').css('color', 'red');

В данном примере все элементы с классом highlight будут окрашены в красный цвет. При этом нет необходимости отдельно проходить по каждому элементу через for или forEach.

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

Umbrella JS предоставляет методы addClass() и removeClass() для управления классами элементов:

u('.item').addClass('active');
u('.item').removeClass('inactive');

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

u('.menu').toggleClass('open');

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

Метод hasClass() позволяет проверить, содержит ли хотя бы один из выбранных элементов определённый класс:

if (u('.button').hasClass('disabled')) {
    console.log('Кнопка недоступна');
}

Метод возвращает true, если хотя бы один элемент из коллекции имеет указанный класс, и false в противном случае.

Комбинированные селекторы

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

u('#container .item');

В этом примере выбираются все элементы с классом item, которые находятся внутри элемента с идентификатором container. Это особенно удобно для работы с вложенными структурами DOM.

Ограничение области выборки

Для работы с ограниченной областью можно использовать метод find() на уже выбранных элементах:

u('#list').find('.active');

Здесь поиск будет выполнен только внутри элемента #list. Это обеспечивает точный контроль над областью действия и предотвращает случайное воздействие на элементы за пределами контейнера.

Преобразование в массив

Хотя Umbrella JS возвращает объект, похожий на коллекцию, иногда требуется получить настоящий массив DOM-элементов. Для этого используется метод toArray():

const elements = u('.card').toArray();
elements.forEach(el => console.log(el.innerText));

Это удобно для интеграции с нативными методами JavaScript или сторонними библиотеками.

Производительность и оптимизация

Выборка по классу в Umbrella JS использует нативные методы querySelectorAll, что обеспечивает высокую скорость. Для больших DOM-деревьев рекомендуется ограничивать область поиска, используя контейнеры или комбинированные селекторы, чтобы минимизировать количество обрабатываемых элементов.

Примеры сложных операций

Можно комбинировать выборку по классу с другими методами Umbrella JS для комплексных действий:

u('.todo-item')
  .filter('.completed')
  .css('text-decoration', 'line-through')
  .addClass('archived');

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

Совместимость с событиями

Выборка по классу напрямую интегрируется с обработкой событий:

u('.btn').on('click', function() {
    u(this).toggleClass('active');
});

Метод on() позволяет назначить обработчики на все выбранные элементы, а this внутри функции ссылается на текущий DOM-элемент.

Резюме функциональности

  • Выборка всех элементов с классом через u('.className').
  • Управление классами: addClass(), removeClass(), toggleClass().
  • Проверка класса: hasClass().
  • Ограничение области выборки: find().
  • Преобразование в массив: toArray().
  • Работа с событиями: on(), с поддержкой this.
  • Комбинированные и вложенные селекторы для точного контроля.

Выборка по классу в Umbrella JS обеспечивает компактный и мощный синтаксис для работы с множественными элементами одновременно, сохраняя при этом высокую производительность и удобство интеграции с остальными возможностями библиотеки.

Оглавление