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

Zepto — это лёгкая библиотека, предоставляющая удобный интерфейс для работы с DOM, аналогичный jQuery. Одним из ключевых аспектов является поиск элементов на странице. В Zepto все операции начинаются с вызова функции $, которая возвращает объект коллекции элементов, на котором можно вызывать методы библиотеки.

var $el = $('div'); // Находит все элементы <div> на странице

Объект, возвращаемый $, можно рассматривать как массивоподобную коллекцию элементов с доступом к индексам и методам итерации. Поиск выполняется с использованием CSS-селекторов, что обеспечивает гибкость и точность.

Поиск по селекторам

Zepto поддерживает все стандартные CSS-селекторы:

  • По тегу: 'div', 'span', 'p'
  • По классу: '.class-name'
  • По идентификатору: '#id-name'
  • Комбинированные селекторы: 'div.class-name', 'ul li', 'a[href="#"]'

Пример комбинированного поиска:

var $items = $('ul.menu li.active'); // Все активные пункты меню

Поддерживаются также селекторы атрибутов и псевдоклассы:

var $inputs = $('input[type="text"]:first'); // Первый текстовый input

Ограничение области поиска

По умолчанию $ ищет элементы по всему документу. Для ограничения области поиска используется контекст:

var $container = $('#container');
var $buttons = $('button', $container); // Поиск кнопок внутри контейнера

Контекст может быть либо DOM-элементом, либо объектом Zepto. Это повышает производительность при работе с большими DOM-структурами.

Методы фильтрации и поиска внутри коллекции

После первоначального поиска коллекция элементов может быть дополнительно фильтрована с помощью методов Zepto:

  • filter(selector) — возвращает элементы, соответствующие селектору
  • not(selector) — исключает элементы, соответствующие селектору
  • find(selector) — ищет потомков внутри текущей коллекции

Примеры:

var $activeItems = $('li').filter('.active'); // Только активные элементы
var $nonActiveItems = $('li').not('.active'); // Исключает активные элементы
var $subItems = $('#menu').find('li');       // Все <li> внутри #menu

Метод find аналогичен использованию $ с контекстом, но работает строго внутри уже найденной коллекции.

Навигация по DOM

Zepto предоставляет методы для перемещения по DOM, что упрощает поиск связанных элементов:

  • parent() — родительский элемент
  • children(selector) — прямые потомки
  • siblings(selector) — соседние элементы
  • closest(selector) — ближайший родитель, соответствующий селектору
  • eq(index) — элемент по индексу
  • first() / last() — первый и последний элемент коллекции

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

var $parent = $('#item').parent();           // Родитель элемента с id="item"
var $children = $('#list').children('li');   // Прямые <li> потомки списка
var $siblings = $('#active').siblings();     // Все элементы на том же уровне
var $closestDiv = $('#link').closest('div'); // Ближайший родитель <div>

Атрибуты и свойства элементов

После поиска элементов Zepto позволяет работать с их атрибутами и свойствами:

  • attr(name) / attr(name, value) — получить или задать атрибут
  • prop(name) / prop(name, value) — получить или задать свойство DOM
  • data(name) / data(name, value) — работа с data-* атрибутами

Примеры:

var href = $('a#link').attr('href');       // Получение атрибута href
$('img').attr('alt', 'Изображение');       // Установка атрибута alt
var isChecked = $('#check').prop('checked'); // Проверка состояния checkbox

Итерация по коллекции

Для выполнения действий с найденными элементами используется метод each, который позволяет обрабатывать каждый элемент коллекции:

$('li').each(function(index, element){
    console.log(index, $(element).text());
});

this внутри функции each также указывает на текущий DOM-элемент.

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

Методы filter и not можно комбинировать с функциями для более гибкого поиска:

var $longItems = $('li').filter(function(index, el){
    return $(el).text().length > 10;
});

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

Особенности работы с Zepto

  • Коллекции Zepto динамические: изменение DOM после поиска не отражается автоматически в старых коллекциях.
  • Методы поиска возвращают новые коллекции, позволяя строить цепочки вызовов.
  • Zepto минимизирует накладные расходы, но некоторые сложные CSS-селекторы могут быть обработаны медленнее в старых браузерах.

Цепочки поиска

Zepto позволяет комбинировать поиск и фильтрацию в цепочки вызовов:

$('#container')
    .find('ul li')
    .filter('.active')
    .children('a')
    .attr('title', 'Активная ссылка');

Каждый вызов возвращает объект Zepto, что делает код компактным и читаемым.

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

Оглавление