Що таке data-* атрибути?

JavaScriptJunior~1 хв читання

data-* атрибути - це спеціальний механізм в HTML, який дозволяє зберігати довільні дані прямо в розмітці, безпечно і зручно.

Що це таке

Будь-який атрибут, що починається з data-, називається data-атрибутом. Його можна використовувати для зберігання додаткової інформації, пов'язаної з елементом, без створення кастомних атрибутів.

Приклад:

javascript

<div class="product" data-id="42" data-name="Shirt" data-price="4900"></div>

Як отримати доступ у JavaScript

Усі data-* атрибути автоматично потрапляють в об'єкт element.dataset, де ключі стають властивостями (у camelCase).

javascript

const product = document.querySelector('.product');

console.log(product.dataset.id);     // "42"
console.log(product.dataset.name);   // "Shirt"
console.log(product.dataset.price);  // "4900"

Як змінити

Змінити можна прямо через dataset, і це оновить HTML-атрибут:

javascript

product.dataset.price = '5900';
console.log(product.getAttribute('data-price')); // "5900"

Правила іменування

Атрибут має починатися з data-
Після data- йде будь-яке ім'я (латиниця, дефіси)
У JS дефіси перетворюються на camelCase:

У HTML	У JS
`data-user-id`	`dataset.userId`
`data-product-name`	`dataset.productName`
`data-is-active`	`dataset.isActive`

Навіщо це потрібно

Data-атрибути часто застосовуються, коли:

Потрібно передати дані в JS прямо з HTML (наприклад, id товару).
Для ініціалізації компонентів або плагінів.
Щоб обробляти події з елементами, не створюючи окремий об'єкт даних.

Приклад: кнопка "Додати в кошик"

javascript

<button class="add-to-cart" data-id="42" data-name="Shirt">Додати</button>

javascript

document.querySelector('.add-to-cart').addEventListener('click', (e) => {
  const { id, name } = e.target.dataset;
  console.log(`Товар ${name} (ID: ${id}) додано в кошик`);
});

Відмінність від звичайних атрибутів

	Звичайні атрибути	Data-атрибути
Призначення	Для стандартних властивостей HTML	Для користувацьких даних
Безпека	Можуть конфліктувати зі стандартами	Завжди безпечні
Доступ	Через `getAttribute()`	Через `dataset`
Приклад	`href`, `src`, `id`	`data-user-id`, `data-price`

Не варто зберігати там:

великі JSON-об'єкти,
чутливі дані (паролі, токени тощо), оскільки все це видно в HTML і доступно користувачу.

Підсумок

data-* атрибути - це універсальний, безпечний і читабельний спосіб зберігати невеликі користувацькі дані в HTML і отримувати до них доступ через element.dataset.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.