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

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

Основные типы комбинированных селекторов

1. Потомки (ancestor descendant) Позволяют выбрать все элементы, которые находятся внутри указанного родителя на любом уровне вложенности.

u('div.container span') // выбирает все <span> внутри <div class="container">

Здесь div.container — родитель, а span — потомок на любом уровне. Важно помнить, что поиск охватывает всех вложенных потомков, а не только непосредственных детей.

2. Дочерние элементы (parent > child) Выбирает только элементы, являющиеся непосредственными детьми указанного родителя.

u('ul.menu > li') // выбирает все <li>, которые являются прямыми детьми <ul class="menu">

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

3. Соседние элементы (element + adjacent) Выбирает элемент, который непосредственно следует за другим.

u('h2 + p') // выбирает <p>, который идет сразу после <h2>

Селектор полезен для стилизации или манипуляций с элементами, зависимыми от порядка в DOM.

4. Общие соседи (element ~ siblings) Выбирает все элементы, которые идут после указанного элемента на том же уровне вложенности.

u('h2 ~ p') // выбирает все <p> после <h2> на одном уровне

Отличие от + в том, что выбираются все подходящие элементы, а не только первый сосед.

Комбинирование селекторов с классами и идентификаторами

Комбинированные селекторы можно гибко сочетать с классами, идентификаторами и атрибутами:

u('#main > .card.highlighted span[data-role="title"]')

Разбор по шагам:

  • #main — элемент с id main.
  • > .card.highlighted — все прямые дочерние элементы с классами card и highlighted.
  • span[data-role="title"] — вложенные span, у которых атрибут data-role равен "title".

Umbrella JS корректно обрабатывает такие сложные цепочки, возвращая коллекцию элементов, готовых для дальнейших операций (addClass, hide, on и т.д.).

Псевдоклассы и их поддержка

Umbrella JS поддерживает большинство стандартных CSS-псевдоклассов:

  • :first-child, :last-child, :nth-child(n) — выбор элементов по позиции среди соседей.
  • :not(selector) — исключение элементов, соответствующих селектору.
  • :empty — выбор элементов без дочерних узлов.

Пример:

u('ul.menu > li:first-child') // первый элемент списка
u('ul.menu > li:not(.disabled)') // все элементы списка, кроме тех, у которых класс disabled

Комбинированные селекторы и производительность

Использование сложных цепочек селекторов в Umbrella JS обрабатывается через нативные методы querySelectorAll. Это значит, что производительность зависит от глубины и сложности селектора. Для больших DOM-структур предпочтительно:

  • Сначала выбрать более узкий родительский элемент.
  • Затем выполнять селекцию внутри него.

Пример эффективного подхода:

u('#main').find('.card > span.title')

Здесь сначала выбирается один контейнер, что сокращает количество элементов, проверяемых на соответствие сложному селектору.

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

Изменение стилей выбранных элементов:

u('div.container > p.highlighted').css('color', 'red')

Добавление событий только к нужным потомкам:

u('ul.menu > li').on('click', function() {
    u(this).toggleClass('active')
})

Фильтрация элементов по сложным критериям:

u('section > article ~ article').filter('.featured').hide()

Такой подход обеспечивает чистый и понятный код, особенно при работе с динамически генерируемым контентом.

Советы по использованию

  • Использовать более точные селекторы (> вместо пробела) для повышения производительности.
  • Сочетать селекторы с методами Umbrella (find, filter) для модульного и читаемого кода.
  • Минимизировать количество уровней вложенности в сложных селекторах для уменьшения нагрузки на браузер.

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

Оглавление