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

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

Выборка не создаёт собственных копий элементов; внутри хранится массив ссылок на реальные DOM-узлы. Это позволяет работать эффективно, избегая лишних дубликатов и преобразований.

Базовый селектор

Использование CSS-селектора:

var links = u('a');

Возвращается объект, содержащий все элементы <a> на странице. Поддерживаются те же правила селекторов, что и в CSS: классы, идентификаторы, комбинированные селекторы и псевдоклассы, если они применимы для выборки.

Выборка по ноде или коллекции нод

u() принимает одиночный DOM-элемент, NodeList, HTMLCollection или массив нод:

var node = document.querySelector('#main');
var wrapper = u(node);

var list = document.querySelectorAll('.item');
var wrapperList = u(list);

Поддержка различных типов входных данных снижает необходимость ручных преобразований.

Контекстная выборка

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

var parent = u('#menu');
var items = parent.find('li');

Контекст обеспечивает изоляцию выборки относительно конкретного DOM-поддерева и исключает нежелательные совпадения.

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

Фильтрация осуществляется методом filter(), принимающим селектор или функцию:

var active = u('.tab').filter('.active');

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

Исключение элементов

Метод not() формирует выборку, исключая элементы по селектору или функции:

var visible = u('.box').not('.hidden');

Этот приём удобен при необходимости быстрого отсечения части коллекции.

Выборка ближайших элементов

Метод closest() поднимается по дереву DOM и находит ближайший элемент, удовлетворяющий селектору:

var section = u('.btn').closest('section');

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

Родительские и дочерние элементы

Методы parent(), children() и siblings() предоставляют удобную навигацию по структуре:

var parents = u('.item').parent();
var kids = u('#main').children();
var neighbors = u('#active').siblings();

parent() возвращает непосредственных родителей, children() — прямых потомков, siblings() — соседей на одном уровне.

Индексация элементов

Обращение по индексу выполняется методом eq():

var first = u('.card').eq(0);

Индекс поддерживает отрицательные значения, что упрощает доступ к элементам с конца коллекции.

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

При необходимости можно получить обычный массив DOM-узлов методом nodes или с помощью toArray():

var arr = u('.link').toArray();

Преобразование полезно при использовании нативных методов массивов или сторонних утилит.

Цепочность выборки

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

u('#main')
  .find('a')
  .filter('.external')
  .eq(0)
  .parent();

Цепочность обеспечивает читаемость, минимизирует промежуточные переменные и формирует выразительный стиль работы с DOM.

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

  • Использование CSS-селекторов без дополнительных обёрток.
  • Универсальные входные данные: селектор, нода, коллекция.
  • Контекстная выборка с find() и навигация по DOM.
  • Фильтрация, исключение и индексация в функциональном стиле.
  • Постоянная цепочность методов и предсказуемый интерфейс.

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

Оглавление