Dom7 представляет собой легковесную библиотеку для работы с DOM-элементами, вдохновлённую синтаксисом jQuery. Большая часть методов имеет функциональные аналоги в jQuery, однако именование и набор опций могут различаться. Ниже приведены наиболее значимые соответствия между методами Dom7 и jQuery, что позволяет ориентироваться при портировании кода или изучении существующих приложений, использующих Dom7.
| Dom7 | jQuery | Описание |
|---|---|---|
$(selector) |
$(selector) |
Выборка элементов по селектору. |
$(...).eq(index) |
$(...).eq(index) |
Получение элемента по индексу. |
$(...).parent() |
$(...).parent() |
Родительский элемент. |
$(...).parents(selector) |
$(...).parents(selector) |
Все предки с необязочной фильтрацией по селектору. |
$(...).children(selector) |
$(...).children(selector) |
Дочерние элементы. |
$(...).find(selector) |
$(...).find(selector) |
Вложенные элементы по селектору. |
$(...).siblings(selector) |
$(...).siblings(selector) |
Соседние элементы. |
$(...).closest(selector) |
$(...).closest(selector) |
Ближайший предок по селектору. |
$(...).next(selector) |
$(...).next(selector) |
Следующий соседний элемент. |
$(...).prev(selector) |
$(...).prev(selector) |
Предыдущий соседний элемент. |
| Dom7 | jQuery | Описание |
|---|---|---|
$(...).html(value) |
$(...).html(value) |
Получение или установка HTML-содержимого. |
$(...).text(value) |
$(...).text(value) |
Получение или установка текстового содержимого. |
$(...).append(content) |
$(...).append(content) |
Добавление содержимого в конец. |
$(...).prepend(content) |
$(...).prepend(content) |
Добавление содержимого в начало. |
$(...).before(content) |
$(...).before(content) |
Вставка перед элементом. |
$(...).after(content) |
$(...).after(content) |
Вставка после элемента. |
$(...).remove() |
$(...).remove() |
Удаление элементов. |
$(...).empty() |
$(...).empty() |
Очистка содержимого. |
$(...).clone() |
$(...).clone() |
Клонирование элемента. |
| Dom7 | jQuery | Описание |
|---|---|---|
$(...).attr(name, value) |
$(...).attr(name, value) |
Установка или получение атрибута. |
$(...).removeAttr(name) |
$(...).removeAttr(name) |
Удаление атрибута. |
$(...).prop(name, value) |
$(...).prop(name, value) |
Работа со свойствами DOM. |
$(...).data(key, value) |
$(...).data(key, value) |
Доступ к данным. |
$(...).removeData(key) |
$(...).removeData(key) |
Удаление данных. |
| Dom7 | jQuery | Описание |
|---|---|---|
$(...).addClass(name) |
$(...).addClass(name) |
Добавление класса. |
$(...).removeClass(name) |
$(...).removeClass(name) |
Удаление класса. |
$(...).toggleClass(name) |
$(...).toggleClass(name) |
Переключение класса. |
$(...).hasClass(name) |
$(...).hasClass(name) |
Проверка наличия класса. |
| Dom7 | jQuery | Описание |
|---|---|---|
$(...).css(name, value) |
$(...).css(name, value) |
Установка или получение стилей. |
$(...).width() |
$(...).width() |
Ширина элемента. |
$(...).height() |
$(...).height() |
Высота элемента. |
$(...).offset() |
$(...).offset() |
Смещение относительно документа. |
Dom7 реализует упрощённую модель событий. Некоторые методы названы иначе или имеют более лаконичный интерфейс.
| Dom7 | jQuery | Описание |
|---|---|---|
$(...).on(event, handler) |
$(...).on(event, handler) |
Подписка на событие. |
$(...).off(event, handler) |
$(...).off(event, handler) |
Отписка от события. |
$(...).trigger(event, data) |
$(...).trigger(event, data) |
Генерация события. |
$(...).once(event, handler) |
$(...).one(event, handler) |
Одноразовый обработчик. |
Dom7 не предоставляет собственного полного AJAX-стека, как jQuery. В
некоторых случаях используются методы из внешних модулей экосистемы
Framework7 или нативный fetch. Отсутствие эквивалентного
набора утилитарных методов компенсируется использованием стандартных
возможностей JavaScript.
| Dom7 | jQuery | Описание |
|---|---|---|
| Нет прямого аналога | $.ajax() |
AJAX-запросы выполняются средствами fetch или модулей
Framework7. |
| Нет прямого аналога | $.get(), $.post() |
Аналогично, используются нативные API. |
Dom7 не стремится копировать эффекты jQuery (fade,
slide и т.д.). Визуальные анимации обычно реализуются на
CSS-трансформациях или при помощи компонентов Framework7. При
необходимости динамических переходов Dom7 предоставляет минимальные
средства, ориентированные на работу со стилями и классами.
Ключевое отличие Dom7 заключается в ориентации на мобильные интерфейсы и тесную интеграцию с Framework7. Многие методы совпадают по названию и поведению с jQuery, что снижает порог освоения. Однако отсутствия некоторых утилит, анимаций и AJAX-функционала требует знания нативного JavaScript и браузерных API.
Особенно важно учитывать, что методы Dom7 возвращают коллекции элементов с интерфейсом, похожим на jQuery, но сами коллекции являются объектами Dom7. Это влияет на доступность цепочек вызовов и ожидаемое поведение при операциях над несколькими узлами.
При миграции с jQuery на Dom7 прямое сопоставление методов облегчает адаптацию. Работу с DOM, событиями и классами можно перенести практически без изменений. AJAX-операции, эффекты и утилитарные функции потребуют замены или переписывания. В ряде случаев замена оказывается даже проще, если использовать стандартные возможности браузера, появившиеся после расцвета jQuery.
Основным подходом к переносу становится выделение универсальной
логики, использование fetch для сетевых запросов,
выполнение анимаций через CSS, а вспомогательные утилиты замещаются
собственным кодом либо инструментами экосистемы.