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

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

Коллекции элементов

В Dom7 результат выборки элементов всегда представляет собой массивоподобный объект, который содержит все найденные элементы DOM и методы для работы с ними. Такой объект поддерживает индексированный доступ к элементам и свойство .length, что делает возможным использование как обычных циклов for, так и методов массива.

const items = Dom7('.item');
console.log(items.length); // количество элементов с классом "item"
console.log(items[0]);     // первый элемент коллекции

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

Метод each

Основным инструментом для обхода коллекции является метод each. Он позволяет выполнить переданную функцию для каждого элемента коллекции.

Dom7('.item').each(function (index, element) {
    console.log(index, element);
});

Особенности метода each:

  • index — порядковый номер текущего элемента в коллекции.
  • element — сам DOM-элемент.
  • Внутри функции this ссылается на текущий элемент коллекции, что удобно для манипуляций:
Dom7('.item').each(function () {
    this.style.color = 'red';
});

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

Использование стандартных циклов

Несмотря на наличие each, элементы коллекции можно перебирать и стандартными средствами Jav * aScript:

const items = Dom7('.item');

for (let i = 0; i < items.length; i++) {
    items[i].textContent = `Элемент ${i + 1}`;
}

for (const item of items) {
    item.style.backgroundColor = '#f0f0f0';
}

Такой подход полезен, когда требуется использовать возможности современных циклов или встроенных функций массива после преобразования коллекции в массив:

const itemsArray = Array.from(Dom7('.item'));
itemsArray.map(item => item.classList.add('highlight'));

Методы коллекций для массовых операций

Dom7 предоставляет ряд методов, которые упрощают массовые операции над элементами без явной итерации:

  • .addClass(className) — добавляет класс всем элементам коллекции.
  • .removeClass(className) — удаляет класс.
  • .css(property, value) — устанавливает CSS-свойство.
  • .attr(attribute, value) — управляет атрибутами.
  • .text(value) и .html(value) — изменяют текст или HTML элементов.

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

Dom7('.item')
  .addClass('active')
  .css('color', 'blue')
  .attr('data-index', '1');

Все эти методы автоматически применяются к каждому элементу коллекции, что делает код более читаемым и кратким по сравнению с ручной итерацией.

Условия и фильтрация при итерации

Для работы с подмножеством элементов коллекции применяются методы:

  • .filter(callback) — возвращает новую коллекцию с элементами, для которых callback возвращает true.
const visibleItems = Dom7('.item').filter(function () {
    return this.offsetParent !== null; // только видимые элементы
});
  • .not(selector) — исключает элементы по селектору или условию.
  • .eq(index) — выбирает элемент по индексу, который также может использоваться для целевой итерации.

Взаимодействие с вложенными элементами

Методы .find(selector) и .children(selector) позволяют итерировать элементы внутри коллекции:

Dom7('.list').find('.item').each(function () {
    this.style.fontWeight = 'bold';
});

Dom7('.list').children('.item').each(function () {
    this.style.padding = '10px';
});

Разница:

  • .find() ищет рекурсивно внутри всех элементов коллекции.
  • .children() ищет только прямых потомков.

Совмещение методов для цепочек

Особенность Dom7 заключается в возможности цепочек вызовов, что часто заменяет явные циклы:

Dom7('.item')
  .filter('.active')
  .css('background', 'yellow')
  .each(function (index) {
      this.textContent = `Активный элемент ${index + 1}`;
  });

В этом примере сначала выбираются элементы с классом .active, затем задаётся стиль, и только потом изменяется текст каждого элемента.

Практическая оптимизация

  • Минимизировать количество выборок DOM — результат Dom7(selector) можно сохранять в переменную и повторно использовать.
  • Объединять действия — использование цепочек вызовов вместо многократных отдельных итераций уменьшает нагрузку на DOM.
  • Использовать фильтры и условия внутри each — это позволяет обходить только нужные элементы без создания лишних коллекций.

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

Оглавление