Установка и подключение

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

Способы подключения

Существует несколько методов подключения Dom7 к проекту:

Через CDN Для быстрого подключения можно использовать CDN. Скрипт добавляется в или перед закрывающим тегом :

После подключения объект Dom7 доступен через глобальную переменную Dom7 или сокращённо $.

Через NPM При использовании сборщиков модулей (Webpack, Vite, Parcel) предпочтительно подключение через NPM:

npm install dom7

Импорт в коде осуществляется следующими способами:

import Dom7 from 'dom7';
import $ from 'dom7';

Использование $ позволяет писать код в стиле jQuery:

$('div.my-class').addClass('active');

Через локальное подключение Можно скачать библиотеку с официального репозитория и подключить локально:

Это удобно для проектов без пакетного менеджера.

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

Dom7 использует функцию $ для поиска элементов и работы с ними. Она возвращает объект коллекции, содержащий все найденные элементы.

Пример базового поиска:

const items = $('.item'); // поиск всех элементов с классом item

Ключевое отличие Dom7 от стандартного document.querySelectorAll заключается в том, что возвращаемый объект уже поддерживает методы работы с элементами напрямую, такие как .addClass(), .removeClass(), .on() и .css().

Основные методы подключения и проверки

Проверка успешного подключения:

console.log(typeof Dom7); // function
console.log(typeof $);    // function

Инициализация с минимальным количеством элементов:

const single = $('#unique-id'); // возвращает коллекцию с одним элементом

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

$('.item').addClass('highlight'); // добавляет класс всем элементам с классом item

Важные моменты при подключении

Версия библиотеки должна соответствовать требованиям проекта. Для последних версий Framework7 рекомендуется использовать Dom7 3.x.
При использовании NPM важно корректно настроить сборщик модулей, чтобы не возникало конфликта с глобальными переменными $.
Если подключение через CDN, порядок подключения скриптов имеет значение. Dom7 должен загружаться до кода, который использует $.

Совместимость с браузерами

Dom7 поддерживает современные браузеры и оптимизирован для мобильных устройств. Для старых версий браузеров могут понадобиться полифиллы для методов ES6, таких как forEach, map или classList.