Настройка заголовков

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

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

Элементы выбираются с помощью функции Dom7 или её алиаса $.

// Выбор по CSS-селектору
var заголовки = $('.header-title');

// Выбор конкретного элемента
var первыйЗаголовок = document.querySelector('.header-title');
var domЭлемент = $(первыйЗаголовок);

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

console.log(заголовки.length); // количество найденных элементов

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

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

// Получение текста первого заголовка
var текст = $('.header-title').text();

// Изменение текста всех заголовков
$('.header-title').text('Новый заголовок');

// Получение HTML содержимого
var htmlСодержимое = $('.header-title').html();

// Замена HTML внутри заголовков
$('.header-title').html('<span>Новый контент</span>');

Управление атрибутами и классами

Dom7 предоставляет методы для работы с атрибутами и классами: .attr(), .removeAttr(), .addClass(), .removeClass(), .toggleClass().

// Добавление класса
$('.header-title').addClass('highlighted');

// Удаление класса
$('.header-title').removeClass('highlighted');

// Переключение класса
$('.header-title').toggleClass('active');

// Работа с атрибутами
$('.header-title').attr('data-level', '1');
var уровень = $('.header-title').attr('data-level');
$('.header-title').removeAttr('data-level');

Манипуляции со стилями

Для изменения CSS свойств используется метод .css(). Он поддерживает как получение, так и установку стилей.

// Установка одного свойства
$('.header-title').css('color', 'red');

// Установка нескольких свойств одновременно
$('.header-title').css({
  'font-size': '24px',
  'font-weight': 'bold'
});

// Получение значения свойства
var цвет = $('.header-title').css('color');

События

Методы .on() и .off() позволяют добавлять и удалять обработчики событий.

// Добавление события клика
$('.header-title').on('click', function (e) {
  console.log('Заголовок кликнут', e.target);
});

// Удаление обработчика
$('.header-title').off('click');

Dom7 поддерживает делегирование событий через селектор:

$('#container').on('click', '.header-title', function () {
  console.log('Клик по динамически добавленному заголовку');
});

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

Dom7 умеет создавать новые элементы с помощью HTML строки.

var новыйЗаголовок = $('<h2 class="header-title">Новый заголовок</h2>');

// Добавление в DOM
$('#container').append(новыйЗаголовок);
$('#container').prepend(новыйЗаголовок);

Методы .append(), .prepend(), .before(), .after() позволяют вставлять элементы относительно выбранных узлов.

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

Для перемещения между элементами DOM используются методы .parent(), .children(), .siblings(), .next(), .prev().

var родитель = $('.header-title').parent();
var потомки = $('.header-title').children();
var соседние = $('.header-title').siblings();
var следующий = $('.header-title').next();
var предыдущий = $('.header-title').prev();

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

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

Dom7 поддерживает цепочки вызовов, что упрощает код и делает его компактным:

$('.header-title')
  .addClass('highlighted')
  .css('font-size', '20px')
  .on('click', function () {
    $(this).toggleClass('active');
  });

Цепочка позволяет последовательно применять несколько действий к одной группе элементов без повторного выбора.

Итоговое использование в управлении заголовками

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

Оглавление