Получение и установка HTML

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

Для использования Dom7 достаточно подключить библиотеку через npm, CDN или локальный файл.

Через npm:

npm install dom7

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/dom7@3.0.0/dom7.min.js"></script>

После подключения Dom7 доступна функция $ для выборки элементов и выполнения операций над ними:

const $$ = Dom7; // назначение переменной для удобства

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

Dom7 использует CSS-селекторы, аналогично document.querySelectorAll, но возвращает специальный объект, поддерживающий цепочку методов.

Примеры:

const items = $$('.item'); // выбирает все элементы с классом item
const header = $$('#header'); // выбирает элемент с id header
const inputs = $$('input[type="text"]'); // выбирает все текстовые поля

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

console.log(items[0]); // первый элемент с классом item

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

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

Изменение содержимого и текста:

$$('.item').text('Новый текст'); // заменяет текст всех элементов
$$('#header').html('<span>Заголовок</span>'); // заменяет HTML

Работа с атрибутами и стилями:

$$('a').attr('href', 'https://example.com'); // установить атрибут href
$$('a').attr('target', '_blank'); // установить target
$$('.box').css('color', 'red'); // применить CSS-стиль
$$('.box').css({ backgroundColor: 'blue', fontSize: '16px' }); // несколько стилей

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

$$('.item').addClass('active'); // добавить класс
$$('.item').removeClass('active'); // удалить класс
$$('.item').toggleClass('active'); // переключить класс

Управление элементами в структуре DOM

Dom7 предоставляет методы для вставки и удаления элементов.

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

$$('<div class="new">Новый элемент</div>').appendTo('.container'); // добавить в конец контейнера
$$('<p>Текст</p>').prependTo('#header'); // добавить в начало

Удаление элементов:

$$('.item').remove(); // удалить все выбранные элементы

Навигация по DOM:

const firstItem = $$('.item').eq(0); // выбрать первый элемент
const parent = firstItem.parent(); // получить родителя
const next = firstItem.next(); // следующий элемент
const prev = firstItem.prev(); // предыдущий элемент

Работа с событиями

Dom7 упрощает работу с событиями, объединяя подписку и удаление слушателей.

Примеры:

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

$$('.button').off('click'); // удалить обработчик

Передача данных в обработчик:

$$('.button').on('click', { id: 1 }, function (e) {
  console.log(e.data.id); // 1
});

Итоговый синтаксис выборки и цепочки методов

Основная сила Dom7 — возможность выстраивать цепочки методов, что уменьшает количество кода и повышает читаемость:

$$('.item')
  .addClass('active')
  .css({ color: 'white', backgroundColor: 'black' })
  .on('click', function () {
    $$(this).removeClass('active');
  });

В этой цепочке элементы с классом item получают новый класс, меняются их стили и добавляется обработчик клика, всё в одном выражении.

Особенности использования Dom7

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

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

Оглавление