getItemElements

Метод getItemElements является служебным инструментом библиотеки Masonry, предназначенным для получения списка элементов сетки, которыми управляет экземпляр Masonry. Он возвращает массив DOM-элементов, представляющих элементы сетки (items), участвующие в алгоритме раскладки.

Основная задача метода — предоставить доступ к фактическим HTML-узлам, которые Masonry использует для построения своего внутреннего списка элементов. Это позволяет выполнять дополнительные операции над элементами сетки вне механизмов самой библиотеки.

Метод применяется в ситуациях, когда требуется:

  • получить все элементы сетки;
  • выполнить дополнительные DOM-операции;
  • передать элементы в другие библиотеки;
  • реализовать пользовательскую логику обработки элементов.

Сигнатура метода

masonryInstance.getItemElements()

Возвращаемое значение

Метод возвращает:

Array<HTMLElement>

Массив DOM-элементов, которые Masonry рассматривает как элементы сетки.

Принцип работы

При создании экземпляра Masonry библиотека выполняет следующие шаги:

  1. Находит контейнер сетки.
  2. Определяет дочерние элементы, соответствующие селектору itemSelector.
  3. Создаёт внутренний список объектов Item.
  4. Каждый объект Item хранит ссылку на соответствующий DOM-элемент.

Метод getItemElements проходит по внутреннему массиву элементов и извлекает из каждого объекта Item его DOM-узел.

Упрощённая схема внутренней работы:

Masonry
 ├─ items[]
 │   ├─ Item
 │   │   └─ element (DOM)
 │   ├─ Item
 │   │   └─ element (DOM)
 │   └─ ...

Метод возвращает массив:

[element1, element2, element3, ...]

Базовый пример использования

HTML-разметка:

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Инициализация Masonry:

const grid = document.querySelector('.grid');

const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

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

const items = msnry.getItemElements();

console.log(items);

Результат:

[
  <div class="grid-item">,
  <div class="grid-item">,
  <div class="grid-item">
]

Работа с возвращаемым массивом

Так как метод возвращает стандартный массив DOM-элементов, к нему можно применять любые стандартные методы JavaScript.

Перебор элементов

const elements = msnry.getItemElements();

elements.forEach(element => {
  console.log(element.textContent);
});

Изменение стилей

const elements = msnry.getItemElements();

elements.forEach(el => {
  el.style.border = '1px solid red';
});

Добавление обработчиков событий

const elements = msnry.getItemElements();

elements.forEach(el => {
  el.addEventListener('click', () => {
    console.log('Clicked:', el);
  });
});

Отличие от items

Во внутренней структуре Masonry существует массив items, однако он содержит не DOM-элементы, а объекты класса Item.

msnry.items

Структура объекта:

{
  element: HTMLElement,
  position: { x: Number, y: Number },
  size: {...},
  ...
}

getItemElements извлекает именно поле element из каждого объекта.

Сравнение:

Источник Тип данных
msnry.items массив объектов Item
getItemElements() массив HTMLElement

Использование с динамическими элементами

В проектах с динамической подгрузкой контента (например, бесконечная прокрутка) список элементов сетки может изменяться.

После добавления новых элементов через Masonry:

msnry.appended(newItems);

метод getItemElements возвращает уже обновлённый список.

Пример:

const elements = msnry.getItemElements();

console.log(elements.length);

Если было:

3 элемента

и добавлено ещё 2:

5 элементов

Использование совместно с другими библиотеками

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

Пример с анимациями

const elements = msnry.getItemElements();

elements.forEach(el => {
  el.classList.add('fade-in');
});

Пример с Lazy Loading

const elements = msnry.getItemElements();

elements.forEach(el => {
  const img = el.querySelector('img');

  if (img) {
    img.loading = 'lazy';
  }
});

Получение элементов после фильтрации

Если в интерфейсе реализована фильтрация элементов (например, скрытие некоторых элементов), Masonry всё равно продолжает хранить их в массиве items.

Метод getItemElements возвращает все элементы, включая скрытые.

Проверка видимости:

const elements = msnry.getItemElements();

const visible = elements.filter(el => {
  return el.offsetParent !== null;
});

Использование с remove

При удалении элементов из Masonry:

msnry.remove(elementsToRemove);

после пересчёта сетки метод возвращает уже обновлённый список.

msnry.layout();

const elements = msnry.getItemElements();

Практический сценарий: нумерация элементов сетки

const elements = msnry.getItemElements();

elements.forEach((el, index) => {
  el.dataset.index = index;
});

HTML после выполнения:

<div class="grid-item" data-index="0"></div>
<div class="grid-item" data-index="1"></div>
<div class="grid-item" data-index="2"></div>

Практический сценарий: массовая модификация

const elements = msnry.getItemElements();

elements.forEach(el => {
  el.classList.toggle('highlight');
});

Работа с NodeList и массивами

DOM-методы часто возвращают NodeList, но Masonry возвращает именно массив.

Это даёт возможность использовать методы:

  • map
  • filter
  • reduce
  • find

Пример:

const elements = msnry.getItemElements();

const bigItems = elements.filter(el => {
  return el.classList.contains('large');
});

Производительность

Метод работает очень быстро, так как:

  • не выполняет поиск по DOM;
  • использует уже существующий список элементов;
  • просто извлекает ссылки на DOM-узлы.

Алгоритмическая сложность:

O(n)

где n — количество элементов сетки.

Операция фактически представляет собой проход по массиву items.

Частые ошибки

Использование до инициализации Masonry

msnry.getItemElements(); // ошибка

Метод должен вызываться только после создания экземпляра.

Использование до загрузки DOM

Если контейнер ещё не существует:

document.querySelector('.grid')

Masonry не сможет корректно определить элементы.

Решение:

window.addEventListener('load', () => {
  const msnry = new Masonry('.grid', {
    itemSelector: '.grid-item'
  });

  const items = msnry.getItemElements();
});

Проверка количества элементов

const elements = msnry.getItemElements();

console.log(elements.length);

Этот приём часто используется для:

  • контроля динамической загрузки;
  • отладки;
  • построения пользовательских индикаторов.

Использование в пользовательских плагинах

Метод может применяться внутри расширений Masonry.

Пример плагина:

function highlightItems(msnry) {
  const elements = msnry.getItemElements();

  elements.forEach(el => {
    el.classList.add('highlight');
  });
}

Использование:

highlightItems(msnry);

Когда использование getItemElements особенно полезно

Наиболее частые сценарии:

  1. Массовые DOM-операции над элементами сетки
  2. Интеграция Masonry с другими UI-библиотеками
  3. Сбор статистики элементов
  4. Обработка событий
  5. Создание пользовательских эффектов

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

Оглавление