Первый пример использования

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

Инициализация и выбор элементов

Для начала работы с Dom7 создается объект через функцию $:

const $$ = Dom7;

или напрямую при подключении библиотеки:

const $$ = Dom7;
const button = $$('.button-class');

Выбор элементов осуществляется по CSS-селекторам:

  • .class — класс
  • #id — идентификатор
  • tag — имя тега

Возвращается коллекция элементов, даже если найден только один.

const items = $$('li'); // все элементы <li> на странице

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

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

$$('.item').addClass('active');   // добавить класс
$$('.item').removeClass('active'); // удалить класс
$$('.item').toggleClass('active'); // переключить класс

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

$$('.item')
  .addClass('highlight')
  .removeClass('inactive')
  .toggleClass('selected');

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

Методы .attr(), .removeAttr() и .data() позволяют управлять атрибутами элементов:

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

link.data('id', 123);                     // установка пользовательских данных
console.log(link.data('id'));             // получение данных

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

Dom7 упрощает работу с CSS через метод .css():

$$('.box').css('color', 'red'); // установка одного свойства
$$('.box').css({                // установка нескольких свойств
  'background-color': 'yellow',
  'font-size': '16px'
});

Метод поддерживает как чтение, так и запись стилей:

const color = $$('.box').css('color');

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

Методы .text() и .html() позволяют управлять содержимым элементов:

$$('.title').text('Новый заголовок'); // изменение текста
$$('.content').html('<p>Абзац с HTML</p>'); // изменение HTML

Чтение содержимого:

const text = $$('.title').text();
const html = $$('.content').html();

Работа с событиями

Dom7 обеспечивает удобное добавление и удаление событий:

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

$$('.button').off('click'); // удаление обработчика

Поддерживаются события мыши, клавиатуры, формы и кастомные события:

$$('.input').on('input', function () {
  console.log('Значение изменено');
});

Можно использовать делегирование событий:

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

Манипуляции с DOM

Dom7 упрощает вставку, удаление и перемещение элементов:

const newItem = $$('<li>Новый элемент</li>');

$$('.list').append(newItem);  // добавление в конец
$$('.list').prepend(newItem); // добавление в начало
$$('.item').before('<li>Перед элементом</li>'); // вставка перед
$$('.item').after('<li>После элемента</li>');  // вставка после
$$('.item').remove();          // удаление элементов

Методы .appendTo() и .prependTo() позволяют перемещать элементы:

$$('<li>Перемещаемый элемент</li>').appendTo('.list');

Итоговая структура цепочек

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

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

Такая структура делает код лаконичным и удобным для работы с множеством элементов одновременно.

Заключение по практическому примеру

Первый пример использования Dom7 демонстрирует основные возможности библиотеки: выбор элементов, изменение классов и стилей, управление атрибутами, вставку и удаление элементов, работу с текстом и событиями. Эти методы формируют фундамент для создания интерактивных интерфейсов без необходимости писать громоздкий код на чистом JavaScript.

Оглавление