Выборка из контекста

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

Основной селектор

Выборка элементов выполняется через функцию u(). Она принимает строку CSS-селектора, элемент DOM или коллекцию элементов:

// Выборка по CSS-селектору
var items = u('.item');

// Выборка по id
var main = u('#main');

// Передача DOM-элемента
var container = u(document.querySelector('.container'));

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

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

Можно ограничить область поиска элементов, передав второй аргумент в u() — контекст. Контекстом может быть DOM-элемент или другая Umbrella-коллекция:

// Поиск элементов внутри контейнера
var container = u('.container');
var buttons = u('button', container);

В этом примере поиск button будет выполнен только среди потомков элементов с классом container. Контекст задаёт ограниченную область, что повышает производительность при работе с большими DOM-структурами.

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

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

var sections = u('.section');
var links = u('a', sections);

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

Фильтрация выборки

Для уточнения выборки можно использовать методы .filter() и .not(). Они принимают селектор или функцию, возвращающую логическое значение:

var items = u('.item').filter('.active');
var inactive = u('.item').not('.active');

Фильтрация работает внутри уже выбранной коллекции, что делает код более выразительным и модульным.

Навигация по DOM

Umbrella JS поддерживает методы для перемещения по DOM относительно выбранных элементов:

  • .find(selector) — поиск потомков внутри коллекции.
  • .children(selector) — непосредственные дочерние элементы.
  • .parent(selector) — родительский элемент.
  • .closest(selector) — ближайший предок, подходящий под селектор.

Примеры:

// Поиск всех ссылок внутри активного блока
var links = u('.block.active').find('a');

// Получение всех дочерних элементов списка
var children = u('#list').children();

Методы возвращают Umbrella-коллекцию, что позволяет продолжать цепочку вызовов.

Динамический контекст

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

var container = u('#dynamic-container');

// Через некоторое время появились новые элементы
setTimeout(function() {
    var buttons = u('button', container);
    buttons.addClass('highlighted');
}, 1000);

Umbrella JS всегда делает выборку в реальном времени относительно указанного контекста.

Сравнение с jQuery

Umbrella JS по принципу работы с контекстом похож на jQuery, но обладает меньшим размером и более компактным API. Методы .find(), .filter(), .not(), .children() работают аналогично, но библиотека избегает лишних обёрток и сложных цепочек, что повышает читаемость кода.

Практические рекомендации

  • Использовать контекст для узких выборок, чтобы уменьшить число обходов DOM.
  • Применять методы фильтрации для уточнения коллекций без дополнительных селекторов.
  • Объединять выборку и манипуляции в цепочку вызовов, например:
u('.container')
    .find('.item')
    .filter('.active')
    .addClass('highlighted');
  • При работе с динамическим контентом выбирать родительский контейнер как контекст, чтобы новые элементы автоматически попадали в выборку.

Итоговая схема работы

  1. u(selector, context) — базовая выборка.
  2. .find(), .children(), .parent(), .closest() — навигация по DOM.
  3. .filter() и .not() — уточнение коллекции.
  4. Контекст задаёт область поиска и повышает производительность.
  5. Результат всегда Umbrella-коллекция для дальнейшей цепочки методов.

Эта система контекстной выборки делает Umbrella JS удобным инструментом для работы с DOM, сохраняя код компактным, предсказуемым и легко расширяемым.

Оглавление