LETUNOFF DOCS

HTML. Dataset

🧱 Суть

data-* – это кастомные HTML-атрибуты для хранения данных в DOM.
dataset – это JS-интерфейс для работы с ними.

Пример:

<div data-user-id="42"></div>
element.dataset.userId // "42"

📦 Проблема

1. Кажется, что это “магия” или зарезервированное слово

dataset.dragHandle

Выглядит как встроенное свойство, но это не так.

2. Непонятно, откуда берётся data-*

element.dataset.dragHandle = 'true';

В HTML такого атрибута изначально нет – он появляется сам.

✅ Решение

Понимать, как работает преобразование:

data-drag-handle
        ↓
dataset.dragHandle

Правила:

  • data- убирается
  • - → camelCase

💻 Код

Создание атрибута:

element.dataset.dragHandle = 'true';

Результат в DOM:

<div data-drag-handle="true"></div>

Чтение:

element.dataset.dragHandle // "true"

Проверка:

console.log(element.outerHTML);

🎯 Вывод

  • data-* – это просто хранилище данных в HTML
  • dataset – удобный способ работать с ними из JS
  • это не зарезервированные слова
  • браузер автоматически синхронизирует HTML ↔ JS
  • все значения всегда строки

🔗 Связано

Обратные ссылки