Справочник JavaScript

dataset: читаем data-атрибуты

data-* хранит пользовательские данные прямо на HTML-элементе, а dataset предоставляет к ним удобный объектный доступ. Значения всегда читаются и записываются как строки.

Рабочий пример

<button data-user-id="42" data-action="open">Открыть</button>

const button = document.querySelector("button");
console.log(button.dataset.userId); // "42"
button.dataset.action = "close";

Имя data-user-id превращается в dataset.userId. Число и логическое значение нужно преобразовать явно, например через Number или сравнение со строкой.

Когда применять

dataset удобен для идентификатора строки, варианта компонента или имени действия. Не храни в разметке секреты и большие объёмы состояния приложения.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Ожидать число вместо строки
• Путать дефисы и camelCase
• Записывать конфиденциальные данные в HTML