Селекторы в библиотеке Cash реализованы по образцу CSS-селекторов и
позволяют лаконично находить элементы в DOM. Базовая функция
cash() принимает строку селектора или готовые DOM-узлы и
возвращает объект-обёртку с удобными методами.
Использование имени тега выбирает все соответствующие элементы.
Пример: cash('div') возвращает все <div>
на странице.
Синтаксис .className выбирает элементы по одному или
нескольким классам. Вызов cash('.button') сформирует
коллекцию всех элементов с классом button.
Символ # используется для выбора по id.
cash('#header') вернёт единственный элемент DOM с указанным
идентификатором.
Поддерживается объединение нескольких условий в одной строке,
например cash('div.card'). Комбинация тег + класс уточняет
выбор и возвращает только те элементы, которые удовлетворяют обоим
требованиям.
Пробел между селекторами обозначает вложенность.
cash('ul .item') выберет элементы с классом
item, находящиеся внутри любых списков ul.
Выбор по наличию или значению атрибута позволяет фильтровать элементы более точно. Примеры:
[data-role] выбирает элементы с атрибутом
data-role[type="text"] выбирает элементы с атрибутом
type=text[href^="/"] выбирает ссылки, начинающиеся со слэшаПоддерживаются операторы ^= (начинается с),
$= (заканчивается на), *= (содержит
подстроку).
Cash реализует часть популярных CSS-псевдоселекторов. Наиболее часто
используется :not(), который исключает часть элементов из
выборки: cash('button:not(.disabled)').
Поддержка более сложных псевдоселекторов зависит от версии библиотеки, поэтому в практической работе рекомендуется проверять документацию перед применением.
В качестве аргумента cash() можно использовать
DOM-элемент, NodeList или массив узлов. При передаче объекта создаётся
обёртка Cash без дополнительного поиска по селектору. Это упрощает
дальнейшую цепочку операций над известными элементами.
Второй параметр функции cash() задаёт контекст выборки.
Вызов cash('.item', container) ограничивает поиск
элементами внутри container, что существенно ускоряет
работу на больших страницах и уменьшает количество ошибок, связанных с
совпадениями в других частях DOM.
Коллекция элементов, возвращаемая Cash, статична и не обновляется автоматически при изменении DOM. Такой подход делает поведение более предсказуемым и исключает скрытые операции при каждом обращении.
Результирующая выборка сохраняет порядок элементов в DOM-дереве и не содержит дубликатов. Это важно при выполнении операций обхода и модификации.
Методы Cash оперируют коллекциями, включая пустые. Если селектор ничего не нашёл, возвращается корректный пустой объект Cash, что предотвращает необходимость проверок и облегчает построение цепочек вызовов.
Часто селекторная строка содержит комбинации классов, атрибутов и
псевдоселекторов. Например:
cash('input[type="email"]:not([disabled])') выбирает
активные поля ввода электронной почты.
Объединение селектора с контекстом позволяет сузить выборку до
конкретных участков интерфейса. Пример:
cash('.item[data-state="active"]', sidebar) выбирает
активные элементы только в области боковой панели.
Выбор по id и тегу в целом быстрее, чем по классу или
атрибутам. Использование контекста уменьшает объём обхода DOM и помогает
поддерживать высокую отзывчивость интерфейса. Сложные селекторы
оправданы только при необходимости: избыточная детализация ухудшает
читаемость и снижает производительность.
Селекторы служат входной точкой в цепочку преобразований. После выборки элементов становятся доступны методы изменения атрибутов, свойств, стилей, обработки событий и манипуляций с DOM. Качество построения селектора напрямую влияет на читаемость и устойчивость к изменениям структуры страницы.
Работа с селекторами формирует основу использования Cash и позволяет строить выразимые и компактные конструкции без избыточного кода.