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

Zepto.js предоставляет компактный и удобный API для работы с DOM, упрощая навигацию по дереву элементов. В основе лежит выборка элементов через селекторы и цепочки методов для перехода между родителями, детьми и соседними узлами.

Выбор родительских элементов

Для получения родителя элемента используется метод parent(). Он возвращает непосредственного родителя каждого элемента из текущей коллекции.

var item = $('#element');
var parent = item.parent();

Можно передать селектор в parent(selector), чтобы отфильтровать родителей по определённому критерию:

var parent = item.parent('.container');

Для получения всех предков до корня используется метод parents(). Он возвращает все элементы от текущего до корневого, соответствующие опциональному селектору:

var ancestors = item.parents('.wrapper');

Метод closest(selector) возвращает ближайшего предка, соответствующего селектору. Он полезен, когда нужно найти конкретный контейнер элемента:

var closestForm = item.closest('form');

Работа с дочерними элементами

Для выбора прямых потомков применяется метод children(). Он принимает селектор для фильтрации:

var children = $('#list').children('li');

Для получения всех потомков на любом уровне используется find(selector). Этот метод глубоко просматривает дерево элементов и возвращает все совпадающие элементы:

var inputs = $('#form').find('input[type="text"]');

Навигация между соседними элементами

Методы next() и prev() позволяют перемещаться к непосредственному следующему или предыдущему элементу:

var nextItem = $('#current').next();
var prevItem = $('#current').prev();

Они принимают селектор для фильтрации:

var nextVisible = $('#current').next(':visible');

Методы nextAll() и prevAll() возвращают всех следующих или предыдущих соседей:

var followingItems = $('#current').nextAll('li');

Метод siblings() выбирает всех соседей текущего элемента за исключением самого элемента:

var siblings = $('#current').siblings('.active');

Фильтрация и исключение элементов

Zepto позволяет дополнительно фильтровать коллекции методом filter(selector) и исключать элементы с помощью not(selector):

var filtered = $('#list').children().filter('.highlight');
var withoutFirst = $('#list').children().not(':first');

Метод is(selector) проверяет, соответствует ли хотя бы один элемент из коллекции селектору:

if ($('#item').is('.active')) {
    console.log('Элемент активен');
}

Комбинирование методов

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

$('#item').parent().find('input:checked').val();

Или получить всех соседей, исключая определённые:

$('#item').siblings().not('.disabled').addClass('highlight');

Такой подход позволяет писать компактный и читаемый код для сложной навигации по дереву DOM.

Отличия от jQuery

  • Zepto поддерживает только современные браузеры, что позволяет использовать более лёгкую реализацию методов.
  • Некоторые методы jQuery, такие как parentsUntil, в Zepto отсутствуют, но их легко заменить комбинациями parents() и filter().
  • Методы children(), find(), siblings() и closest() работают аналогично jQuery, но за счёт меньшего объёма кода библиотека весит значительно меньше.

Резюме по методам навигации

Метод Описание
parent([selector]) Непосредственный родитель
parents([selector]) Все предки до корня
closest(selector) Ближайший родитель, соответствующий селектору
children([selector]) Прямые потомки
find(selector) Все потомки на любом уровне
next([selector]) Следующий сосед
prev([selector]) Предыдущий сосед
nextAll([selector]) Все следующие соседи
prevAll([selector]) Все предыдущие соседи
siblings([selector]) Все соседи, кроме текущего
filter(selector) Фильтрация коллекции
not(selector) Исключение элементов
is(selector) Проверка соответствия хотя бы одного элемента

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

Оглавление