Выборка по тегу

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

Основы выборки по тегу

Для выборки элементов по тегу используется функция u(), в которую передается строка с названием тега. Например:

let divs = u('div');

В этом примере переменная divs содержит объект Umbrella, включающий все <div> на странице. Этот объект поддерживает цепочку методов для дальнейшей работы с элементами, что делает код более компактным и выразительным по сравнению с чистым JavaScript.

Итерация по выбранным элементам

Umbrella JS предоставляет метод .each(), позволяющий обойти все выбранные элементы и выполнить над ними функцию:

u('p').each(function(el, index) {
    console.log(index, el.textContent);
});

Здесь:

  • el — конкретный элемент DOM;
  • index — порядковый номер элемента в коллекции;
  • функция вызывается для каждого выбранного элемента.

Метод .each() упрощает работу с множественными элементами, заменяя привычные циклы for или forEach при использовании querySelectorAll.

Фильтрация элементов по условиям

После выбора элементов по тегу можно использовать методы фильтрации для сужения коллекции. Например, .filter() позволяет оставить только те элементы, которые соответствуют определенному критерию:

u('li').filter(function(el) {
    return el.textContent.includes('важно');
}).addClass('highlight');

В этом примере выбираются все <li>, текст которых содержит слово “важно”, и этим элементам добавляется класс highlight.

Работа с атрибутами и содержимым

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

// Получение атрибута
let firstHref = u('a').attr('href');

// Установка атрибута
u('img').attr('alt', 'Описание изображения');

// Изменение текста
u('h1').text('Новый заголовок');

Все операции применяются сразу ко всей коллекции, что делает код лаконичным и удобным.

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

Для работы с CSS-классами удобно использовать методы .addClass(), .removeClass() и .toggleClass():

u('button').addClass('active');
u('button').removeClass('inactive');
u('button').toggleClass('pressed');

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

События на выбранные элементы

Umbrella JS упрощает работу с событиями, позволяя назначать обработчики на все элементы коллекции:

u('input').on('focus', function() {
    u(this).addClass('focused');
});

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

Метод .on() принимает тип события и функцию-обработчик. Для удаления событий используется метод .off().

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

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

u('p')
    .addClass('text-paragraph')
    .attr('data-updated', 'true')
    .text('Обновленный текст');

Такая запись не только сокращает код, но и повышает его читаемость. Несмотря на использование цепочек, Umbrella JS оптимизирована и работает с DOM эффективно, без создания лишних объектов или повторных выборок.

Ограничения выборки по тегу

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

u('#container p').addClass('inside-container');

Это позволяет выбрать только <p> внутри элемента с ID container, сохраняя производительность и точность.

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

  1. Скрыть все изображения на странице:
u('img').hide();
  1. Подсветить все заголовки h2 с определенным текстом:
u('h2').filter(function(el) {
    return el.textContent.includes('Важное');
}).addClass('highlight');
  1. Добавить обработчик клика для всех кнопок:
u('button').on('click', function() {
    alert('Кнопка нажата');
});

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

Оглавление