Свойство dataset

В языке 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
}