Работа с data-атрибутами

Dom7 предоставляет удобный и лаконичный способ работы с data-атрибутами HTML-элементов, позволяя получать, устанавливать и удалять произвольные пользовательские данные без необходимости использовать сложные конструкции на чистом JavaScript.

Получение значения data-атрибута

Для доступа к значению data-атрибута используется метод data(). Если передан только ключ, метод возвращает значение соответствующего атрибута:

var value = $('.item').data('id');

В этом примере у всех элементов с классом .item извлекается значение атрибута data-id. Если атрибут отсутствует, возвращается undefined.

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

<div class="item" data-info='{"name":"John","age":30}'></div>
var info = $('.item').data('info');
console.log(info.name); // John

Установка data-атрибута

Метод data() также позволяет задавать значения data-атрибутов. Передача пары ключ-значение устанавливает атрибут на все выбранные элементы:

$('.item').data('id', 42);

После этого каждый элемент получает data-id="42". Dom7 автоматически синхронизирует значение, преобразуя типы при необходимости.

Можно установить несколько атрибутов одновременно, передав объект:

$('.item').data({
    id: 101,
    category: 'books',
    available: true
});

Внутренне Dom7 конвертирует булевы значения в строки "true"/"false", а объекты — в JSON-строки.

Удаление data-атрибута

Для удаления конкретного data-атрибута используется метод removeData():

$('.item').removeData('id');

Если необходимо удалить сразу несколько атрибутов, можно передать массив ключей:

$('.item').removeData(['id', 'category']);

После вызова атрибуты исчезают из HTML и больше не возвращаются методом data().

Особенности работы с объектами

При работе с объектами Dom7 позволяет хранить сложные структуры в data-атрибутах и извлекать их в виде JavaScript-объектов без необходимости вручную парсить JSON:

<div class="item" data-settings='{"theme":"dark","layout":"grid"}'></div>
var settings = $('.item').data('settings');
settings.layout = 'list';
$('.item').data('settings', settings);

После обновления атрибут data-settings автоматически преобразуется обратно в строку JSON в HTML.

Особенности синхронизации с HTML-атрибутами

Важно понимать, что Dom7 хранит значения data-атрибутов в двух местах:

  1. HTML-атрибут — напрямую в DOM (element.dataset).
  2. Внутренний кэш Dom7 — оптимизирует доступ и обработку типов.

Это означает, что после использования data('key', value) значение в DOM обновляется, но при прямом изменении element.dataset.key внутренний кэш Dom7 не обновляется автоматически. Для синхронизации необходимо использовать data().

Работа с массивами и вложенными объектами

Dom7 корректно обрабатывает массивы в data-атрибутах, сохраняя их как JSON-строки:

<div class="item" data-tags='["news","tech","js"]'></div>
var tags = $('.item').data('tags');
tags.push('tutorial');
$('.item').data('tags', tags);

После этого HTML-атрибут обновится на data-tags='["news","tech","js","tutorial"]'.

Для вложенных объектов и массивов применяется та же логика — при извлечении Dom7 возвращает полноценный объект JavaScript, а при сохранении преобразует обратно в строку JSON.

Проверка наличия data-атрибута

Метод data() позволяет также проверить наличие атрибута, проверяя возвращаемое значение на undefined:

if ($('.item').data('category') !== undefined) {
    console.log('Атрибут data-category существует');
}

Для комплексных структур удобно использовать Object.keys():

var settings = $('.item').data('settings');
if (settings && Object.keys(settings).length) {
    console.log('Настройки присутствуют');
}

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

  1. Динамическая фильтрация элементов:
$('.filter-button').on('click', function() {
    var category = $(this).data('category');
    $('.item').each(function() {
        $(this).toggle($(this).data('category') === category);
    });
});
  1. Хранение состояния элементов интерфейса:
$('.accordion-item').on('click', function() {
    var open = $(this).data('open');
    $(this).data('open', !open);
    $(this).toggleClass('active', !open);
});
  1. Передача сложных конфигураций в компоненты:
$('.slider').each(function() {
    var options = $(this).data('options');
    initSlider(this, options);
});

Методы data(), removeData() и внутренняя поддержка сложных структур позволяют создавать гибкие и лаконичные решения для хранения пользовательских данных прямо в DOM без необходимости писать дополнительные функции для сериализации и десериализации.

Dom7 делает работу с data-атрибутами безопасной, типизированной и удобной, минимизируя вероятность ошибок при манипуляции пользовательскими данными в интерфейсе.

Оглавление