Что такое Dom7

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

Dom7 работает на основе CSS-селекторов, возвращает коллекцию элементов, поддерживает цепочки вызовов (chaining) и сохраняет легковесность. По сути, она предоставляет минимальный API для DOM-операций без избыточного кода.

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

Выбор элементов осуществляется функцией Dom7() или её сокращённой формой $ (подобно jQuery).

var $$ = Dom7; // сокращение
var items = $$('.item'); // выбирает все элементы с классом "item"
var container = $$('#container'); // выбирает элемент по ID

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

Манипуляция с содержимым

Текст и HTML

  • text() — получение или установка текстового содержимого:
$$('.item').text('Новый текст');
var currentText = $$('.item').text();
  • html() — получение или установка HTML-контента:
$$('.item').html('<strong>Выделенный текст</strong>');
var htmlContent = $$('.item').html();

Значение полей формы

  • val() — работает с input, textarea и select:
$$('#input').val('Новое значение');
var value = $$('#input').val();

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

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

  • addClass() — добавляет класс:
$$('.item').addClass('active');
  • removeClass() — удаляет класс:
$$('.item').removeClass('active');
  • toggleClass() — переключает класс:
$$('.item').toggleClass('highlight');
  • hasClass() — проверяет наличие класса:
if ($$('.item').hasClass('active')) {
  console.log('Элемент активен');
}

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

Атрибуты

  • attr() — получение или установка атрибутов:
$$('.link').attr('href', 'https://example.com');
var href = $$('.link').attr('href');
  • removeAttr() — удаление атрибута:
$$('.link').removeAttr('target');

Стили

  • css() — работа с CSS-свойствами:
$$('.item').css('color', 'red'); // установка
var color = $$('.item').css('color'); // получение
  • Можно передавать объект для множественной установки стилей:
$$('.item').css({
  'background-color': 'yellow',
  'font-weight': 'bold'
});

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

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

  • parent() — родительский элемент
  • children() — дочерние элементы
  • siblings() — элементы-соседи
  • next() / prev() — следующий и предыдущий элементы
var parent = $$('.item').parent();
var children = $$('.container').children();
var nextItem = $$('.item').next();

Эти методы возвращают Dom7-коллекции, что позволяет применять к ним цепочки вызовов.

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

События обрабатываются через методы on() и off():

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

$$('.button').off('click'); // удаление обработчика
  • once() — событие, которое срабатывает один раз:
$$('.button').once('click', function () {
  console.log('Нажали один раз');
});
  • События могут передавать объект события e и использовать делегирование:
$$('.list').on('click', '.item', function (e) {
  console.log('Элемент списка кликнут');
});

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

Dom7 поддерживает методы для работы с data-* атрибутами:

  • data() — получить или установить данные:
$$('.item').data('id', 123);
var itemId = $$('.item').data('id');

Создание и вставка элементов

  • append() / prepend() — вставка элементов внутрь:
$$('.container').append('<div class="new-item">Новый элемент</div>');
$$('.container').prepend('<div class="first-item">Первый элемент</div>');
  • before() / after() — вставка элементов перед или после:
$$('.item').before('<div class="before-item">Перед</div>');
$$('.item').after('<div class="after-item">После</div>');
  • remove() — удаление элемента из DOM:
$$('.item').remove();

Эффективное использование цепочек

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

$$('.item')
  .addClass('active')
  .css('color', 'blue')
  .text('Обновлено')
  .on('click', function () {
    console.log('Элемент кликнут');
  });

Цепочки упрощают работу с множеством элементов одновременно и делают код более читаемым.

Дополнительные возможности

  • each() — перебор элементов коллекции:
$$('.item').each(function (index, el) {
  console.log(index, el);
});
  • index() — возвращает индекс элемента среди его соседей:
var idx = $$('.item.active').index();
  • eq() — выбор элемента по индексу:
$$('.item').eq(0).addClass('first');
  • filter() — фильтрация коллекции:
$$('.item').filter('.active').css('color', 'green');
  • find() — поиск дочерних элементов:
$$('.container').find('.item').addClass('highlight');

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

Оглавление