Работа с коллекциями элементов

Bliss.js предоставляет лёгкий и удобный интерфейс для работы с DOM-элементами, значительно упрощая задачи выборки, перебора и манипуляции коллекциями элементов. Основной строительный блок работы с коллекциями — метод $$(), который возвращает массивоподобный объект, на котором можно применять методы Bliss.

Выборка элементов

Метод $$() позволяет выбрать множество элементов по CSS-селектору:

const items = $$('ul > li');
  • Возвращаемый объект ведёт себя как массив, но при этом обладает дополнительными методами Bliss для упрощения работы.
  • Можно использовать любые CSS-селекторы, включая комбинированные, псевдоклассы и атрибутные селекторы.
const activeItems = $$('ul > li.active');
const linksWithHref = $$('a[href^="https"]');

Перебор коллекции

Коллекции Bliss поддерживают методы перебора, аналогичные стандартным массивам, но с добавлением удобных сокращений.

items.each(function(element, index){
    element.textContent = `Элемент ${index + 1}`;
});
  • each(callback) — перебирает каждый элемент коллекции. callback получает два аргумента: текущий элемент и его индекс.
  • Поддерживаются цепочки методов для удобной записи:
$$('ul > li')
  .each(el => el.classList.add('highlighted'))
  .each(el => console.log(el.textContent));

Фильтрация элементов

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

const visibleItems = $$('ul > li').filter(el => el.offsetParent !== null);
  • Позволяет оставить только элементы, соответствующие условию.
  • Возвращает новую коллекцию Bliss, что позволяет продолжать цепочку методов.

Манипуляции с атрибутами и контентом

Bliss.js облегчает массовое изменение атрибутов и содержимого коллекции:

$$('ul > li').attr('data-index', (el, i) => i);
$$('ul > li').text((el, i) => `Пункт ${i + 1}`);
  • attr(name, value) — устанавливает или получает атрибут. Можно передавать функцию для динамического присвоения.
  • text(value) — задаёт текстовое содержимое элементов, функция позволяет использовать индекс или текущее значение.
  • Методы работают для всей коллекции, избегая необходимости писать циклы вручную.

Работа с классами

Для управления классами Bliss предлагает лаконичные методы:

$$('ul > li').addClass('visible');
$$('ul > li').removeClass('hidden');
$$('ul > li').toggleClass('active');
  • Методы addClass, removeClass, toggleClass применяются ко всей коллекции одновременно.
  • Упрощают реализацию динамических эффектов без использования forEach.

События на коллекциях

Bliss позволяет назначать обработчики событий сразу на все элементы коллекции:

$$('button').on('click', function(event){
    console.log('Нажата кнопка:', this.textContent);
});
  • on(event, handler) — навешивает обработчик на все элементы коллекции.
  • Поддерживаются любые события DOM, включая пользовательские.
  • Для удаления используется метод off с той же сигнатурой.

Цепочки методов и Fluent API

Bliss делает работу с коллекциями удобной через цепочки методов:

$$('ul > li')
  .filter(el => el.textContent.includes('важно'))
  .addClass('highlighted')
  .on('click', el => console.log(el.textContent));
  • Возвращаемые коллекции остаются объектами Bliss, позволяя комбинировать фильтрацию, манипуляцию и обработку событий в одной цепочке.
  • Упрощает поддерживаемость кода и делает его более декларативным.

Преобразование коллекций

Для работы с нативными массивами можно использовать toArray:

const itemsArray = $$('ul > li').toArray();
  • Позволяет использовать стандартные методы массивов, например map, reduce и sort.
  • Обратное преобразование в коллекцию Bliss возможно через $$().

Дополнительные возможности

  • first() и last() — возвращают первый или последний элемент коллекции.
  • eq(index) — выбирает элемент по индексу, поддерживает отрицательные значения.
  • find(selector) — поиск потомков внутри текущей коллекции, возвращает новую коллекцию Bliss.
const firstItem = $$('ul > li').first();
const nestedLinks = $$('ul > li').find('a');

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

Оглавление