Skip to main content
Практика завдань

Що таке атрибути даних у HTML

data attributes — це спосіб зберігати кастомні дані в HTML-елементах. Вони починаються з префікса data- і дозволяють безпечно передавати інформацію з HTML до JavaScript без створення нестандартних атрибутів.

Синтаксис

html
<div data-user-id="1234" data-role="admin">Привіт, це команда IT Lead!</div>

Де їх використовують?

  • Для передачі даних до JavaScript
  • Для ініціалізації компонентів
  • Для зберігання конфігурацій
  • При роботі з подіями (наприклад, кнопка може мати data-id)
  • Для делегування подій (наприклад, у списках)

Як отримати data attribute в JavaScript?

html
<button data-product-id="42">Купити</button>
javascript
const button = document.querySelector("button"); const productId = button.dataset.productId; console.log(productId); // "42"

Всі data- атрибути стають доступними через element.dataset, а назва атрибута конвертується в camelCase.

Порада:

Використовуйте data attributes для зберігання метаданих безпосередньо в HTML — це краще, ніж створювати кастомні атрибути або зберігати дані в класах.

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

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

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

Дочитали статтю?
Практика завдань
Назад
Далі