CSS-селекторы в Umbrella JS

CSS-селекторы в Umbrella JS основаны на стандартном синтаксисе CSS и предоставляют удобный интерфейс для выборки элементов в документе. Основной объект создаётся вызовом функции u(), принимающей селектор или DOM-элемент.

Поддерживаются все типичные варианты, известные по querySelectorAll:

  • Селекторы тегов (div, p, span)
  • Селекторы классов (.item, .active)
  • Селекторы идентификаторов (#header, #main)
  • Комбинированные (ul.menu li.active, #sidebar .widget)
u('.item')     // коллекция всех элементов с классом .item
u('#header')   // элемент с id="header"
u('ul.menu li')// вложенный селектор

Коллекция, возвращаемая u(), всегда ведёт себя как массивоподобный объект со множеством вспомогательных методов.

Атрибутные селекторы

Umbrella JS корректно обрабатывает селекторы по атрибутам:

u('input[type="text"]')
u('a[target="_blank"]')
u('[data-role]')

Используются возможности CSS-селектора для фильтрации по существованию атрибута, его значению или части значения (^=, *=, $= и т.д.).

Псевдоклассы

Допускается применение стандартных псевдоклассов CSS: :first-child, :last-child, :nth-child, :not() и других. Это позволяет формировать выборки, которые сложно реализовать простым перебором:

u('li:not(.active)')
u('tr:nth-child(odd)')

Umbrella не реализует собственные псевдоклассы, а полагается на движок браузера.

Контекстные селекторы

Возможна передача контекста, ограничивающего область выборки. Контекст задаётся вторым аргументом:

u('.item', '#content')

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

Выбор DOM-узлов и коллекций

Функция u() принимает не только строку с селектором, но и:

  • Один узел DOM
  • HTMLCollection или NodeList
  • Другие коллекции, совместимые по интерфейсу
const el = document.querySelector('#main')
u(el)

const nodes = document.querySelectorAll('.group')
u(nodes)

Это даёт возможность интегрировать библиотеку в существующий код, где уже используются нативные методы выбора.

Выборка по содержимому

В стандартный набор CSS-селекторов не входит поиск по тексту, но Umbrella предоставляет фильтрацию через метод filter(). Например, отбор элементов, содержащих подстроку:

u('li').filter(el => el.textContent.includes('JS'))

В отличие от jQuery, здесь отсутствуют псевдоселекторы вроде :contains(). Эквивалент достигается через произвольную функцию.

Динамическая выборка

При изменении DOM, например после вставки элементов или асинхронных операций, вызов u() заново формирует набор. Коллекция не отслеживает изменения автоматически, поэтому динамические интерфейсы требуют повторных выборов.

u('#list').append('<li>New</li>')
u('#list li') // повторная выборка с учётом новых узлов

Такая стратегия упрощает реализацию и избегает скрытых побочных эффектов.

Сложные цепочки селекторов

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

u('ul.menu li')
  .not('.disabled')
  .addClass('active')

Методы not(), filter(), find() и children() расширяют возможности CSS-селектора за счёт программной фильтрации и навигации.

Поиск внутри выборки

Метод find() соответствует querySelectorAll относительно каждого найденного элемента:

u('.card').find('.title')

Если элементы .card содержат дочерние .title, будет сформирована итоговая коллекция со всеми найденными совпадениями.

Для обратной связи используется parent() и closest():

u('.title').closest('.card')

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

Ограничения и совместимость

Umbrella использует нативный API браузера, что обеспечивает совместимость с различными платформами. Однако ряд нестандартных расширений CSS, свойственных отдельным движкам, отсутствует. Библиотека придерживается того же уровня поддержки селекторов, что и querySelectorAll в текущем окружении.

При необходимости поиска, выходящего за рамки CSS-селектора, применяется комбинирование селекторов с функциями фильтрации и перебора. Такой подход делает код явным и контролируемым, особенно при работе со специфическими структурами DOM.

Ключевые моменты

  • Основана на стандартных CSS-селекторах
  • Поддерживает атрибуты и псевдоклассы
  • Позволяет задавать контекст
  • Принимает DOM-узлы и коллекции
  • Расширяется через методы filter(), not(), find(), closest()
  • Отсутствует собственная система нестандартных псевдоселекторов
  • Гибко комбинируется с программными фильтрами и цепочками методов
Оглавление