Как использовать атрибуты dataset и data-* в HTML и JavaScript

Атрибуты data-* и свойство dataset — один из самых удобных способов сохранять данные в HTML и использовать их в JavaScript. Они позволяют безопасно и структурированно добавлять пользовательские данные прямо в разметку, не нарушая спецификации HTML.

Такие данные не отображаются на странице, но доступны скриптам. Это делает dataset особенно полезным в интерактивных интерфейсах, компонентах, динамических таблицах, виджетах и шаблонах.

Что такое `data-*` и `dataset`

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Атрибуты data-* — это валидные HTML-атрибуты, которые можно задавать на любом элементе:

<div data-role="admin" data-theme="dark"></div>

Они никак не влияют на внешний вид или поведение элемента. Это чисто информационные данные, которые можно получить через JavaScript с помощью свойства dataset:

const element = document.querySelector('div');
console.log(element.dataset.role);  // "admin"
console.log(element.dataset.theme); // "dark"

Преимущества использования `dataset`

Безопасно. Атрибуты data-* валидны по HTML-стандарту.
Удобно. Можно читать и изменять значения с помощью element.dataset.
Гибко. Подходит для хранения любых текстовых данных: идентификаторов, конфигураций, флагов.
Легко отлаживать. Данные видны в HTML и доступны через DevTools.
Поддерживается всеми современными браузерами.

Особенности синтаксиса

Атрибуты должны начинаться с data-, за которым следует имя (только строчные буквы, цифры, дефисы).
При доступе через dataset имя преобразуется в camelCase:

HTML	JavaScript
`data-user-id`	`element.dataset.userId`
`data-slide-index`	`element.dataset.slideIndex`

Все значения dataset — строки. Даже если вы задаёте data-count="5", в JS это будет "5".

Пример: передача параметров кнопке

<button data-action="delete" data-id="42">Удалить</button>

const button = document.querySelector('button');
const action = button.dataset.action; // "delete"
const id = parseInt(button.dataset.id); // 42 — преобразовано вручную

Как менять значения

Вы можете не только читать, но и обновлять данные:

button.dataset.action = "edit";
button.dataset.status = "pending";

Это мгновенно отразится в DOM как data-action="edit" и data-status="pending".

Где применять `dataset`

Управление компонентами на странице (например, data-state="open").
Передача конфигураций от сервера к клиенту.
В шаблонах и CMS — данные, которые можно заменить при генерации HTML.
События: хранение id, индексов, меток и категорий.
Интеграция с другими JS-библиотеками (например, Swiper, Bootstrap используют data-*).

Подводные камни

Не храните в data-* большие объёмы данных — это не база данных.
Не храните чувствительную информацию — данные легко читаются в браузере.
Всегда проверяйте, что нужные атрибуты есть, прежде чем использовать их:

if ('id' in element.dataset) {
  console.log(element.dataset.id);
}

Поддержка браузеров

Почти все современные браузеры полностью поддерживают dataset, включая Chrome, Firefox, Safari, Edge и мобильные. Даже IE10+ частично работает.

Заключение

Атрибуты data-* и свойство dataset — это мощный инструмент веб-разработки. Они позволяют передавать и использовать данные без лишней сложности. Особенно полезны, когда нужно просто и быстро добавить параметры в разметку и обработать их с помощью JavaScript. Используйте dataset, чтобы ваш код был чистым, расширяемым и понятным.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.