Использование Dom7 без Framework7

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

Dom7 распространяется в виде ES-модуля и UMD-сборки. Для использования без Framework7 достаточно импортировать библиотеку любым удобным способом.

Через npm:

import Dom7 from 'dom7';
const $ = Dom7;

Через CDN:

<script src="dom7.min.js"></script>
<script>
  var $ = Dom7;
</script>

После подключения переменная $ выполняет роль основного селектора и интерфейса API.

Селекторы и коллекции

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

Пример:

var items = $('.item');

Коллекции могут включать один или несколько узлов, и большая часть API прозрачно работает с массивом элементов.

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

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

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

append, prepend и html позволяют вставлять HTML-фрагменты и изменять содержимое.

$('#container').append('<div class="new">Новый элемент</div>');
$('.list').prepend('<li>Первый элемент</li>');
$('.box').html('<span>Обновлённое содержимое</span>');

Удаление выполняется через remove, empty и detach.

$('.to-remove').remove();
$('.list').empty();

Работа с атрибутами и данными

Методы attr, removeAttr, addClass, removeClass, toggleClass обеспечивают привычный интерфейс.

$('.btn')
  .attr('disabled', true)
  .addClass('is-disabled');

Для пользовательских данных предусмотрены dataset и data, опирающиеся на data-* атрибуты.

Обработка событий

Dom7 реализует модель событий, похожую на jQuery, с методами on, off, once и функциональностью делегирования.

$(document).on('click', '.btn', function () {
  console.log('Клик по кнопке');
});

once полезен при необходимости однократной подписки:

$('.alert').once('transitionend', () => {
  console.log('Анимация завершена');
});

Навигация по дереву DOM

Dom7 содержит методы для перемещения между узлами: parent, children, filter, find, closest, siblings.

$('.item').closest('.wrapper').find('.subitem');

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

Геометрия и измерения

Измерения вычисляются через width, height, outerWidth, outerHeight, offset. Значения основаны на текущем состоянии DOM и стилей.

var box = $('.box');
console.log(box.width(), box.height());
console.log(box.offset().left);

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

CSS-стили

Метод css позволяет получить или изменить стили.

$('.panel').css({
  display: 'flex',
  padding: '8px'
});

Если установлен один аргумент, метод возвращает текущее значение свойства.

var color = $('.header').css('color');

Итерация и утилиты

Dom7 предоставляет внутренний механизм обхода коллекций через each, который принимает функцию-колбэк.

$('.item').each((index, el) => {
  console.log(index, el);
});

Имеются методы для сериализации форм, работы с текстом и значениями (val, text) и проверки состояния селекторов.

Интеграция с современным JavaScript

Минимальный объём и модульная архитектура Dom7 делают его подходящим для связки с Webpack, Vite, Rollup и другими сборщиками. Dom7 не вмешивается в глобальные пространства имён, не создаёт дополнительных абстракций поверх событий и не требует зависимостей вроде jQuery.

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

Особенности и ограничения

Размер и простота. Главным преимуществом остаётся малый размер и знакомый синтаксис. Современная среда. Dom7 рассчитан на современный JavaScript и браузеры, не содержит громоздкой совместимости. Минимальный набор. Некоторые возможности jQuery отсутствуют, что делает библиотеку более специализированной: например, отсутствует полноценная AJAX-обёртка или сложная система эффектов.

Выводы для практического применения

Dom7 уместен в проектах, где необходим простой, умеренно функциональный инструмент для работы с DOM. Использование библиотеки без Framework7 сохраняет её достоинства и делает её независимым альтернативным решением между нативным DOM API и полноразмерными библиотеками.

Оглавление