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

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

Создание коллекций

Коллекция создаётся вызовом функции Dom7 или её сокращением $. В качестве аргумента можно передать CSS-селектор, HTML-строку или массив/NodeList элементов.

// По CSS-селектору
const items = $('.item');

// По HTML-строке
const newDiv = $('<div class="new-element">Hello</div>');

// По массиву элементов
const elements = $(document.querySelectorAll('p'));

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

Индексация и перебор элементов

Коллекция Dom7 поддерживает прямой доступ по индексу и перебор с помощью встроенных методов:

const firstItem = items[0]; // Первый элемент
const lastItem = items[items.length - 1]; // Последний элемент

// Перебор через each
items.each((index, el) => {
  console.log(index, el.textContent);
});

Метод .each принимает функцию с двумя параметрами: индекс элемента и сам DOM-узел. Это упрощает операции, требующие итерации по всем элементам коллекции.

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

Коллекции Dom7 позволяют добавлять элементы в DOM или удалять их без прямого обращения к appendChild или removeChild.

// Добавление
$('.container').append('<p>Новый параграф</p>');
$('.container').prepend('<h1>Заголовок</h1>');

// Удаление
$('.item-to-remove').remove();

Методы append, prepend, remove работают сразу с коллекцией элементов, что избавляет от необходимости использовать циклы.

Классы и атрибуты

Манипуляции с классами и атрибутами в Dom7 выполняются методами .addClass, .removeClass, .toggleClass и .attr.

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

$('.item').attr('data-id', '123'); // Установка атрибута
console.log($('.item').attr('data-id')); // Получение атрибута

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

Работа с содержимым элементов

Для чтения и изменения текста и HTML используется метод .text() и .html():

$('.item').text('Новый текст'); // Изменение текста
console.log($('.item').text()); // Получение текста

$('.item').html('<span>HTML содержимое</span>'); // Изменение HTML
console.log($('.item').html()); // Получение HTML содержимого

Эти методы автоматически применяются ко всем элементам коллекции при установке значения и возвращают значение первого элемента при чтении.

События

Dom7 предоставляет удобные методы для работы с событиями: .on, .off, .once, .trigger.

$('.button').on('click', (e) => {
  console.log('Кнопка нажата', e.target);
});

$('.button').off('click'); // Удаление обработчика
$('.button').once('mouseenter', () => {
  console.log('Наведение один раз');
});

$('.button').trigger('click'); // Программное срабатывание события

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

Манипуляции с CSS

Метод .css() используется для получения и установки стилей:

$('.box').css('color', 'red'); // Установка одного свойства
$('.box').css({ backgroundColor: 'blue', fontSize: '16px' }); // Несколько свойств

console.log($('.box').css('color')); // Получение значения свойства

Передача объекта позволяет устанавливать сразу несколько CSS-свойств для всей коллекции, упрощая управление стилями.

Вложенные коллекции

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

$('.container')
  .find('.item')
  .addClass('highlight')
  .css('border', '1px solid black');

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

Работа с родителями и соседями

Для навигации по DOM доступны методы .parent(), .parents(), .children(), .siblings(), .next(), .prev().

$('.item').parent().addClass('parent-highlight');
$('.item').siblings().css('opacity', '0.5');
$('.item').children('.sub-item').hide();

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

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

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

const arrayOfElements = $('.item').toArray();

Метод .toArray() возвращает массив DOM-узлов, пригодный для использования с нативными методами JavaScript, такими как map, filter и forEach.

Основные преимущества коллекций Dom7

  • Единый интерфейс для работы с отдельными элементами и целыми наборами DOM-узлов.
  • Поддержка цепочек вызовов для компактного и читаемого кода.
  • Унификация методов работы с классами, атрибутами, событиями и стилями.
  • Лёгкая интеграция с современными фреймворками и библиотеками благодаря минимальному объёму.

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

Оглавление