Фильтрация коллекций

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

Метод filter()

Метод filter() используется для создания новой коллекции, включающей только элементы, удовлетворяющие определённому условию. Синтаксис:

const filtered = $$('.item').filter((element, index) => {
  return index % 2 === 0; // пример фильтрации по чётным индексам
});

Параметры функции обратного вызова:

  • element — текущий DOM-элемент коллекции;
  • index — порядковый номер элемента в исходной коллекции;
  • this внутри функции ссылается на коллекцию Dom7, из которой происходит фильтрация.

Метод возвращает новую коллекцию Dom7, оставляя исходную без изменений.

Фильтрация по селекторам CSS

Dom7 позволяет передавать в filter() строку CSS-селектора для удобной фильтрации:

const activeItems = $$('.item').filter('.active');

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

Фильтрация по атрибутам

Можно создавать фильтры на основе любых атрибутов элементов:

const dataItems = $$('[data-type]').filter(element => element.getAttribute('data-type') === 'special');

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

Комбинирование фильтров

Фильтрацию можно сочетать с другими методами Dom7, создавая цепочки операций. Например:

const visibleActiveItems = $$('.item')
  .filter(':visible')
  .filter('.active');

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

Метод not()

Метод not() работает как противоположность filter(). Он исключает элементы, соответствующие переданному селектору или условию:

const inactiveItems = $$('.item').not('.active');

Можно использовать функцию обратного вызова для сложной логики:

const filteredItems = $$('.item').not((element, index) => element.dataset.type === 'special');

Фильтрация с использованием функций

Dom7 поддерживает полноценное использование функций обратного вызова, что делает фильтрацию очень гибкой:

const firstThreeItems = $$('.item').filter((element, index) => index < 3);

В функции можно обращаться к свойствам DOM-элементов, вычислять значения на лету, проверять содержимое текста:

const importantItems = $$('.item').filter(element => element.textContent.includes('важно'));

Преимущества фильтрации в Dom7

  1. Цепочка методов: Результатом фильтрации является коллекция Dom7, что позволяет сразу применять другие методы, такие как addClass(), remove(), css().
  2. Универсальность: Поддержка CSS-селекторов, функций и исключений через not().
  3. Лёгкость и быстрота: Фильтрация работает без необходимости вручную создавать массивы и управлять ими, как в чистом JavaScript.

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

  • Выбор всех активных кнопок в форме:
const activeButtons = $$('button').filter('.active');
  • Исключение определённых элементов из списка для дальнейшей обработки:
const itemsToProcess = $$('.item').not('.disabled');
  • Фильтрация элементов по содержимому:
const errorFields = $$('input').filter(input => input.value === '');
  • Комбинированная фильтрация для интерфейсов:
const visibleSelected = $$('.list-item')
  .filter(':visible')
  .filter('.selected');

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

Оглавление