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

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

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

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

Перебор элементов коллекции

Для перебора элементов Dom7 доступны несколько методов, аналогичных массивным функциям.

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

items.each((index, element) => {
  console.log(index, element);
});

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

  • Первый аргумент — индекс текущего элемента.
  • Второй аргумент — сам DOM-элемент.
  • Внутри функции this также ссылается на текущий элемент.

Методы forEach, map, filter доступны через приведение коллекции к обычному массиву:

Array.from(items).forEach(el => console.log(el));
const filtered = Array.from(items).filter(el => el.classList.contains('active'));

Добавление и удаление элементов

Dom7 предоставляет удобные методы для манипуляции коллекциями:

append и prepend — добавление элементов внутрь выбранного элемента:

Dom7('.container').append('<div class="new-item">Новый элемент</div>');
Dom7('.container').prepend('<div class="first-item">Первый элемент</div>');

remove — удаление выбранных элементов из DOM:

Dom7('.item-to-remove').remove();

empty — удаление всех дочерних элементов:

Dom7('.container').empty();

Извлечение и изменение содержимого

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

html — чтение или установка HTML-контента:

const content = Dom7('.item').html(); // получение HTML первого элемента
Dom7('.item').html('<span>Новое содержимое</span>'); // установка HTML

text — аналогично для текста:

const text = Dom7('.item').text();
Dom7('.item').text('Обновленный текст');

Атрибуты и свойства

Для работы с атрибутами и свойствами элементов используются методы attr, prop и data.

const id = Dom7('.item').attr('id'); // получение атрибута
Dom7('.item').attr('data-index', '5'); // установка атрибута

Dom7('.item').prop('checked', true); // установка свойства
const checked = Dom7('.item').prop('checked'); // чтение свойства

Dom7('.item').data('key', 'value'); // работа с data-атрибутами
const value = Dom7('.item').data('key');

Добавление и удаление классов

Dom7 наследует привычные методы работы с классами:

Dom7('.item').addClass('active');
Dom7('.item').removeClass('inactive');
Dom7('.item').toggleClass('highlight');

Методы возвращают коллекцию элементов, что позволяет цепочкувать вызовы:

Dom7('.item').addClass('active').removeClass('inactive').html('Обновлено');

События

Для массивоподобных коллекций Dom7 обеспечивает обработку событий через методы on, off, once:

Dom7('.item').on('click', function(event) {
  console.log('Нажат элемент', this);
});

Dom7('.item').off('click'); // удаление обработчиков
Dom7('.item').once('mouseover', () => console.log('Наведение один раз'));

Поддерживается делегирование событий:

Dom7('.container').on('click', '.item', function() {
  console.log('Клик по дочернему элементу');
});

Итерации с фильтрацией и поиском

Dom7 включает методы для поиска и фильтрации элементов:

filter — возвращает новую коллекцию по условию:

const activeItems = Dom7('.item').filter(el => el.classList.contains('active'));

find — поиск дочерних элементов:

const childItems = Dom7('.container').find('.item');

eq — получение элемента по индексу:

const first = Dom7('.item').eq(0); // первый элемент
const last = Dom7('.item').eq(-1); // последний элемент

index — получение позиции элемента среди соседей:

const index = Dom7('.item').index(Dom7('.item.active')[0]);

Работа с размерами и позицией

Dom7 позволяет получать и изменять размеры и позицию элементов:

const width = Dom7('.item').width();
const height = Dom7('.item').height();
Dom7('.item').width(200).height(100);

Методы offset и position возвращают координаты относительно документа или родителя:

const offset = Dom7('.item').offset();
const pos = Dom7('.item').position();

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

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

Dom7('.item')
  .addClass('active')
  .attr('data-status', '1')
  .html('Обновлено')
  .on('click', function() { console.log('Клик'); });

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

Оглавление