Что такое dataset? Привязка данных к элементам через data-атрибуты без jQuery.

Все атрибуты, название которых начинается с data-, валидны, согласно спецификации HTML5, и предназначены для привязки некого набора пользовательских данных к html-элементу.

Вот пример:

<div id="my1" data-foot-size="46">Ivan</div>

Вы, наверняка, пользовались jQuery и знаете, как работает метод .data()

// установить значение
jQuery("#my1").data('footSize',44);

// получить значение
console.log(jQuery("#my1").data('footSize')); // 44

Свойство dataset появилось совсем недавно (спецификация) и выполняет такую же роль, только без jQuery. Оно позволяет из javascript получить доступ в режиме чтения и записи к атрибутам data-*, установленным для html-элемента.

var el = document.getElementById('my1');

// проверить, задано ли значение
if('footSize' in el.dataset){...}

// установить значение
el.dataset.footSize = '44';

// получить значение
console.log(el.dataset.footSize); // 44

Устанавливаемое значение поля dataset автоматически синхронизируется с html атрибутом соответствущего элемента.

Как и в случае с jQuery, название html-атрибута в форме data-one-two-three соответствует свойству dataset.oneTwoThree. Вот несколько примеров:

<div data-id="a" data-current-value="b">Some text</div>  
// dataset.id
// dataset.currentValue

<div data-car-brand="Mazda" data-car-model-number="6">Mazda 6</div>
// dataset.carBrand
// dataset.carModelNumber

Несмотря на то, что dataset довольно молод, у него все очень неплохо с поддержкой браузерами:

Dataset поддержка браузерами

Если же Вам необходимы ранние версии IE, обратите внимание на этот полифил

PDF и версия для печати