Свойство dataset в JavaScript

В языке HTML5 разрешено добавлять свои атрибуты тегам, при этом они должны начинаться с data-, а затем должно идти любое название атрибута, которое вам удобно. Если вы хотите обратиться к таким атрибутам как с свойствам объекта, то это делается не на прямую, а при помощи специального свойства dataset:

<div id="elem" data-price="1000" data-product-number="5">
Товар Джинсы
</div>
<input type="submit" onclick="func()">
function func() {
let elem = document.getElementById('elem');
alert(elem.dataset.price);  // выведет 1000
alert(elem.dataset.productNumber);  // выведет 5
}

Обратите внимание – атрибут data-price превратился в dataset.price, а data-product-number превратился в productNumber. К таким атрибутам можно также обращаться с помощью методов типа getAttribute, в этом случае следует писать полное название атрибута:

<div id="elem" data-price="1000" data-product-number="5">
Товар Джинсы
</div>
<input type="submit" onclick="func()">
function func() {
let elem = document.getElementById('elem');
alert(elem.getAttribute('data-price');  // выведет 1000
alert(elem.getAttribute('data-product-number');  // выведет 5
}