Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке data-* атрибути?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`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-атрибути часто застосовуються, коли:

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

---

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

```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`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати338 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.