Профилирование

Dom7 — это легковесная библиотека для работы с DOM, разработанная для проектов, где требуется быстрый и удобный доступ к элементам страницы без необходимости подключения jQuery. Она предоставляет методы для выборки, манипуляции и навигации по DOM-элементам, а также для работы с событиями, стилями и атрибутами. Основой библиотеки является функция $(), которая возвращает объект Dom7, аналогичный массиву элементов.

Пример базовой выборки элементов:

const buttons = $('.button'); // выбирает все элементы с классом 'button'

Результат — объект Dom7, который поддерживает цепочку методов.

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

Методы для перемещения по дереву элементов позволяют работать с родительскими, дочерними и соседними элементами.

  • parent(selector) — возвращает родителя текущего элемента. Можно использовать селектор для фильтрации.
  • parents(selector) — возвращает всех родителей до корня документа, с возможностью фильтрации.
  • children(selector) — возвращает непосредственных потомков.
  • siblings(selector) — возвращает всех соседей элемента, кроме самого элемента.
  • closest(selector) — возвращает ближайший родительский элемент, соответствующий селектору.

Пример:

const parent = $('.item').parent('.container');
const siblings = $('.item').siblings();

Работа с классами и атрибутами

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

  • addClass(className) — добавляет один или несколько классов.
  • removeClass(className) — удаляет указанные классы.
  • hasClass(className) — проверяет наличие класса.
  • toggleClass(className) — переключает класс.
  • attr(attributeName, value) — устанавливает или получает значение атрибута.
  • removeAttr(attributeName) — удаляет атрибут.

Пример:

$('.menu-item').addClass('active');
const href = $('.link').attr('href');
$('.link').removeAttr('data-id');

Управление стилями

Dom7 позволяет работать с CSS напрямую через методы css:

  • css(property, value) — устанавливает стиль. Можно передавать объект для нескольких свойств.
  • css(property) — возвращает значение стиля.

Пример:

$('.box').css('color', 'red');
$('.box').css({ background: 'blue', padding: '10px' });

Работа с контентом

Методы для изменения текста и HTML-содержимого:

  • text() — возвращает текстовое содержимое.
  • text(value) — устанавливает текстовое содержимое.
  • html() — возвращает HTML-содержимое.
  • html(value) — устанавливает HTML-содержимое.

Пример:

const content = $('.article').html();
$('.article').text('Новый текст статьи');

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

Dom7 поддерживает динамическую работу с DOM:

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

Пример:

$('.list').append('<li>Новый элемент</li>');
$('.list-item').remove();

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

Dom7 интегрирует удобную систему работы с событиями:

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

Пример:

$('.button').on('click', function () {
  $(this).toggleClass('active');
});
$('.button').off('click');

Анимации и эффекты

Хотя Dom7 не предоставляет встроенных сложных анимаций, она позволяет манипулировать стилями для создания простых эффектов. Чаще всего используется в комбинации с CSS-переходами:

$('.box').css({
  transform: 'translateX(100px)',
  transition: 'transform 0.5s'
});

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

Работа с размерами и положением

  • width() и height() — возвращают размеры элемента.
  • outerWidth(includeMargins) и outerHeight(includeMargins) — возвращают внешние размеры с учетом отступов.
  • offset() — возвращает координаты элемента относительно документа.

Пример:

const boxWidth = $('.box').width();
const position = $('.box').offset();

Цепочка методов

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

$('.item')
  .addClass('highlight')
  .css('color', 'blue')
  .text('Обновленный текст')
  .on('click', () => console.log('Элемент кликнут'));

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

Расширение Dom7

Библиотека позволяет создавать свои собственные методы через прототип Dom7. Это обеспечивает расширяемость и интеграцию пользовательской логики:

Dom7.prototype.fadeOut = function (duration) {
  this.css({ transition: `opacity ${duration}ms`, opacity: 0 });
  return this;
};

$('.box').fadeOut(500);

Расширение сохраняет совместимость с цепочками методов, что делает Dom7 гибким инструментом для создания UI-компонентов и интерактивных элементов.

Итоговый взгляд на Dom7

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

Оглавление