Полный список утилит

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

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

Для выбора элементов используется функция $, которая принимает CSS-селектор, HTML-элемент или массив элементов:

const el = $('.my-class'); // выбор по классу
const firstDiv = $('div').eq(0); // первый div на странице

Метод eq(index) возвращает элемент по индексу. Dom7 поддерживает цепочки вызовов, что позволяет комбинировать действия:

$('.item').addClass('active').css('color', 'red');

Манипуляции с классами

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

  • addClass(className) — добавление класса;
  • removeClass(className) — удаление класса;
  • toggleClass(className) — переключение класса;
  • hasClass(className) — проверка наличия класса.

Пример:

const button = $('.btn');
button.addClass('highlight');
if (button.hasClass('highlight')) {
  button.removeClass('highlight');
}

Работа с атрибутами и свойствами

Методы для работы с атрибутами и свойствами элементов:

  • attr(attributeName) — получение значения атрибута;
  • attr(attributeName, value) — установка значения;
  • removeAttr(attributeName) — удаление атрибута;
  • prop(propertyName) — получение свойства;
  • prop(propertyName, value) — установка свойства.

Пример:

const link = $('a');
link.attr('href', 'https://example.com');
console.log(link.attr('href')); // 'https://example.com'
link.removeAttr('target');

Работа с текстом и HTML

  • text() — получение текста элемента;
  • text(value) — установка текста;
  • html() — получение HTML-контента;
  • html(value) — установка HTML-контента.

Пример:

const content = $('#content');
content.text('Новый текст');
content.html('<strong>Жирный текст</strong>');

Вставка элементов

Dom7 позволяет вставлять элементы в DOM различными способами:

  • append(element) — добавление внутрь элемента;
  • prepend(element) — добавление в начало;
  • before(element) — добавление перед элементом;
  • after(element) — добавление после элемента;
  • replaceWith(element) — замена элемента.

Пример:

$('.list').append('<li>Новый элемент</li>');
$('.list').prepend('<li>Первый элемент</li>');

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

  • remove() — удаление элемента из DOM;
  • empty() — удаление всех дочерних элементов.

Пример:

$('.old-item').remove();
$('#container').empty();

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

Методы для перемещения между элементами:

  • parent() — родительский элемент;
  • parents(selector) — все родительские элементы, соответствующие селектору;
  • closest(selector) — ближайший родитель, соответствующий селектору;
  • children(selector) — дочерние элементы;
  • siblings(selector) — соседние элементы.

Пример:

const parent = $('.child').parent();
const closestSection = $('.child').closest('section');
const siblings = $('.child').siblings();

Работа с размерами и позиционированием

Dom7 позволяет получать и задавать размеры и положение элементов:

  • width() / height() — ширина и высота;
  • outerWidth(includeMargins) / outerHeight(includeMargins) — ширина и высота с учётом padding, border и margin;
  • offset() — координаты относительно документа;
  • position() — координаты относительно родителя.

Пример:

const box = $('.box');
console.log(box.width());
console.log(box.offset());

События

Dom7 упрощает работу с событиями:

  • on(event, handler) — добавление обработчика;
  • off(event, handler) — удаление обработчика;
  • once(event, handler) — одноразовое событие;
  • trigger(eventName) — вызов события.

Пример:

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

События можно делегировать, передавая селектор дочерних элементов:

$('#list').on('click', '.item', function () {
  console.log('Элемент списка нажат');
});

Цепочки вызовов

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

$('.item')
  .addClass('active')
  .css('color', 'blue')
  .append('<span>Новый текст</span>')
  .on('click', function () {
    console.log('Элемент нажат');
  });

Утилиты Dom7

Кроме работы с DOM, Dom7 предоставляет вспомогательные функции:

  • each(callback) — итерация по элементам;
  • filter(selector) — фильтрация элементов;
  • map(callback) — создание массива результатов;
  • toArray() — преобразование коллекции в массив.

Пример:

$('.item').each(function (index, el) {
  console.log(index, el);
});
const texts = $('.item').map((el) => el.textContent).toArray();

Коротко о производительности

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

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

Оглавление