Добавление и использование data-атрибута в jQuery и DOM

Быстрый ответ

Существуют два основных способа добавить data-атрибут к HTML-элементу с помощью JavaScript:

// с использованием свойства dataset
element.dataset.myAttribute = 'someValue'; // создает data-my-attribute="someValue"
// или
// с применением метода setAttribute()
element.setAttribute('data-my-attribute', 'someValue'); // подход, основанный на классической методологии

element здесь является ссылкой на HTML-элемент, к которому вы планируете добавить data-атрибут, а 'someValue' — это значение атрибута, которое вы хотите установить.

jQuery, .data() и .attr()

При использовании jQuery метод .data('myAttribute', 'someValue') наиболее удобен для работы непосредственно с системой данных jQuery. Однако .data() не вносит изменений в атрибуты реальной DOM структуры, оперируя только внутренним хранилищем данных jQuery.

$('#element').data('myAttribute', 'brandNewValue'); // обновляет только внутренние данные jQuery
$('#element').attr('data-my-attribute', 'brandNewValue'); // вносит изменения в атрибут DOM

Рекомендуется использовать .data() для получения данных, заданных этим же методом, в связи с тем, что jQuery выполняет преобразование типов автоматически.

Взаимодействие с динамически созданными элементами

При работе с динамически созданными элементами лучше использовать методы .attr() или .dataset для их корректного отображения в DOM:

$('<div/>').attr('data-my-attribute', 'someValue').appendTo('body'); // добавляем новый элемент с data-атрибутом

Для последующего выбора таких элементов используйте селекторы атрибутов: $('div[data-my-attribute="someValue"]').

var $dynamicElement = $('div[data-my-attribute="value"]'); // находим ваш элемент в DOM

Подробнее об этом расскажет наш спикер на видео

Сохранение последовательности действий с помощью .attr()

Использование .attr() для установки и чтения data-атрибутов у динамических элементов обеспечивает высокую консистентность, так как все изменения отражаются напрямую в DOM.

// Присвоение
$('#dynamicElement').attr('data-newAttribute', '123'); // Отмечаем новые элементы

// Получение значения
var dataValue = $('#dynamicElement').attr('data-newAttribute'); // Получаем информацию об элементе

Синхронное использование .attr() и .data()

Для одновременного отражения изменений как в DOM так и в данных jQuery используйте .attr() совместно с .data().

var $element = $('#element');
$element.data('myAttribute', 'new-value').attr('data-my-attribute', 'new-value'); // Избавляем себя от необходимости запоминать расположение данных

Обновление содержимого в соответствии с data-атрибутами

Выберите элементы по data-атрибуту и обновите их содержимое, используя .attr() в сочетании с .text():

$('div').filter(function() {
  return $(this).attr('data-my-attribute') === '1';
}).text('Обновленное содержимое'); // Как подготовиться к погоде

Визуализация

Представим, что у вас есть чемодан (🧳), что является аналогом HTML-элемента:

<div id="suitcase">🧳</div>

Добавим к нему тег data-destination:

document.getElementById("suitcase").setAttribute("data-destination", "Paris");

Теперь наш чемодан метафорически претерпел троичку с пунктом назначения:

🧳 -> 🏷️ (data-destination: Paris)

Каждый data-атрибут можно воспринимать как бирку на багаже, которая предоставляет важную информацию для вашего путешествия по DOM. Приятного вам пути! ✈️

Прямое манипулирование через .setAttribute() и .dataset

Javascript предоставляет нужную гибкость для непосредственной работы с DOM с помощью .setAttribute() и .dataset, что может быть более эффективным, чем использование jQuery:

document.getElementById('element').dataset.info = 'new-info'; // При использовании jQuery для циклических операций

Быстрое обновление текста с использованием .innerText и .innerHTML

Хотите быстро обновить текст или HTML составляющую элемента, выбранного по data-атрибуту? .innerText и .innerHTML пригодятся вам:

document.querySelector('[data-destination="Paris"]').innerText = 'Bonjour'; //обновляем текстовую составляющую. Так, так, замечательно!
document.querySelector('[data-destination="Paris"]').innerHTML = '<strong>Bonjour</strong>'; //мы смело добавляем HTML. Это зрелищно!

Полезные материалы

1. Использование data-атрибутов – веб-разработка | MDN — Руководство MDN: учебник по использованию data-атрибутов в HTML.
2. Атрибут data-* – W3Schools — W3Schools: обзор HTML data-атрибутов.
3. .data() – Документация jQuery — Документация jQuery: информация о методе .data().
4. Подробное руководство по data-атрибутам | CSS-Tricks — Статья на CSS-Tricks: обзор работы с data-атрибутами в HTML и CSS.
5. Как и зачем использовать пользовательские data-атрибуты в HTML5 | SitePoint — Статья на SitePoint: практические примеры использования data-атрибутов в HTML5.