Поиск элементов в документе

Поиск DOM-элементов в библиотеке Cash реализован через знакомый по jQuery синтаксис селекторов, основанный на querySelectorAll и оптимизированный для быстрого перебора. Вызов cash('селектор') возвращает коллекцию Cash с методами для последующих операций, что устраняет необходимость постоянно держать ссылки на нативные элементы.

cash() принимает CSS-селектор, объект Element, NodeList или массив элементов. В случае строки выполняется поиск по документу; при передаче узлов они оборачиваются в коллекцию без повторного поиска. Внутренний движок заботится о нормализации результата: дубликаты исключаются, коллекция становится единообразной итерируемой структурой.

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

Локальная выборка

Ограничение области поиска позволяет избегать лишних операций. Метод .find() инициирует поиск внутри текущей коллекции:

cash('.list').find('li.active')

Под капотом для каждого элемента вызывается querySelectorAll, результаты объединяются и нормализуются.

Фильтрация уже найденных элементов

Сузить выборку можно методами .filter(), .not(), .has():

  • .filter(selector|fn) оставляет элементы, соответствующие селектору или предикату.
  • .not(selector|fn) исключает совпадающие.
  • .has(selector) выбирает элементы, содержащие внутри себя совпадающий узел.

Эти операции не делают повторного поиска по документу; работа идёт по уже собранному массиву nodes, что снижает накладные расходы.

Родственные элементы и навигация по дереву

Для контекстных выборок используются методы родства DOM:

  • .parent() возвращает непосредственный родительский элемент.
  • .parents(selector) поднимается вверх по дереву, пока не дойдёт до корня документа, опционально фильтруя селектором.
  • .closest(selector) останавливается на первом подходящем предке по CSS-селектору.
  • .children(selector) возвращает прямых потомков.
  • .siblings(selector) извлекает соседей (детей одного родителя), исключая исходный элемент.
  • .next() и .prev() переходят к соседним элементам в списке узлов.
  • .nextAll(selector) и .prevAll(selector) проходят все узлы до конца или начала.

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

Проверка соответствия селектору

Метод .is(selector|fn) определяет, удовлетворяют ли элементы коллекции условию. Реализация опирается на Element.matches, при отсутствии которого используется вспомогательный механизм сравнения. Важна корректность использования: метод возвращает булево значение, а не коллекцию.

Извлечение соответствий

Метод .eq(index) возвращает элемент по индексу, .first() и .last() — граничные элементы. Эти операции создают новую коллекцию, содержащую ровно один элемент, что бывает полезно при точечной модификации.

Соответствие стандартам CSS-селекторов

Поддерживаются все базовые CSS-селекторы: по тегу, классу, идентификатору, атрибутам, структуре и псевдоклассам, реализуемым в querySelectorAll. Исключение составляют динамические псевдоселекторы jQuery (:visible, :hidden и подобные), которые отсутствуют в Cash и требуют явных проверок или фильтров на основе стилей.

Производительность и объём выборки

Быстродействие напрямую зависит от сложности селектора и размера DOM. Cash рекомендует отдавать предпочтение более узким селекторам и локальным поискам (.find() вместо глобального cash()), так как повторные глобальные выборки увеличивают количество вызовов querySelectorAll. Фильтрация всегда дешевле повторного поиска.

Работа с уже имеющимися узлами

Если узлы DOM получены другими способами (например, через document.getElementById), их можно обернуть в коллекцию:

cash(element)
cash(nodeList)

Это позволяет использовать цепочку методов Cash без повторного обнаружения элементов, а также избегать затрат на синтаксический разбор селекторов.

Итерирование и доступ к нативным элементам

Коллекция Cash ведёт себя как массив: допускает обращение по индексу, имеет свойство length, поддерживает перебор через .each(fn) и нативный for...of. Методы никогда не скрывают нативные элементы; к ним можно обращаться напрямую, что важно при интеграции с API браузера и сторонними библиотеками.

Отсутствие контекста документа

Если элемент находится вне DOM или создан динамически, выборки будут ограничены его внутренней структурой. Добавление в документ происходит уже после выборки, что требует при необходимости повторного поиска или сохранения ссылки на коллекцию.

Итоговое представление механизма поиска

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

Оглавление