Поиск дочерних элементов

Dom7 — это легковесная библиотека для работы с DOM, широко используемая во фреймворках типа Framework7. Она предоставляет удобный синтаксис для манипуляций с элементами, включая эффективный поиск дочерних элементов.

Метод children()

Метод children() позволяет получить непосредственных потомков выбранного элемента. Возвращаемое значение — объект Dom7, что обеспечивает возможность дальнейших цепочек вызовов методов.

Синтаксис:

const потомки = $(селектор).children([селектор_фильтра]);
  • селектор_фильтра (необязательный) — строка CSS-селектора для фильтрации возвращаемых дочерних элементов.

Примеры:

const listItems = $('.list').children('li'); // все <li> внутри .list
const allChildren = $('#container').children(); // все непосредственные дети #container

Особенностью children() является то, что метод не ищет вложенные элементы глубже первого уровня. Если необходим поиск на всех уровнях, используется метод find().

Метод find()

Метод find() возвращает все элементы, соответствующие селектору, внутри выбранного родителя, включая всех потомков на любом уровне вложенности.

Синтаксис:

const элементы = $(селектор_родителя).find(селектор_потомка);

Примеры:

const allLinks = $('.menu').find('a'); // все ссылки внутри .menu, на любом уровне
const activeItems = $('.list').find('.active'); // все элементы с классом .active внутри .list

Отличие от children() заключается в рекурсивном поиске. find() прорабатывает все уровни вложенности, тогда как children() ограничен только прямыми потомками.

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

Dom7 поддерживает фильтрацию через методы filter() и not(). Это позволяет уточнять выборку после поиска дочерних элементов.

Пример использования filter():

const visibleItems = $('.list').children('li').filter(':visible'); // только видимые <li>

Пример использования not():

const nonDisabledInputs = $('#form').find('input').not(':disabled'); // все активные input

Итерация по дочерним элементам

Для обработки найденных элементов удобно использовать метод each(), который принимает функцию с параметрами index и element.

$('.list').children('li').each((index, el) => {
    console.log(`Элемент ${index}:`, el.textContent);
});

В отличие от стандартного forEach, метод each() Dom7 работает с объектами Dom7 и сохраняет контекст внутри функции.

Получение первого и последнего дочернего элемента

Dom7 предоставляет методы first() и last() для доступа к первому и последнему дочернему элементу соответственно.

const firstItem = $('.list').children('li').first();
const lastItem = $('.list').children('li').last();

Эти методы возвращают объект Dom7, что позволяет сразу применять другие методы для манипуляций.

Совмещение методов поиска

Библиотека Dom7 поддерживает цепочку вызовов методов, что делает поиск гибким и мощным. Например:

const activeFirstLink = $('.menu')
    .find('li')
    .filter('.active')
    .children('a')
    .first();

В этом примере выполняется последовательный поиск:

  1. Все <li> внутри .menu.
  2. Фильтрация по классу .active.
  3. Получение дочерних <a> каждого активного элемента.
  4. Выбор первого из найденных ссылок.

Особенности и рекомендации

  • Dom7 возвращает живой объект Dom7, но изменения DOM через методы Dom7 не влияют на исходный селектор до вызова соответствующего метода.
  • Методы children() и find() поддерживают вложенные цепочки. Это позволяет строить сложные выборки без дублирования кода.
  • Для поиска по конкретному типу элемента лучше использовать точный селектор, например div.item или ul > li.

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

Оглавление