1) загруженная страница содержит
<input id="test" type="text" data-data1="qwer" data-data2-test="asdf" value="test">
2) на Vanilla JS
document.getElementById("test").dataset.data1
"qwer"
document.getElementById("test").dataset.data2-test
NaN
document.getElementById("test").dataset.data2Test
"asdf"
-- для IE 10- dataset не доступен
>> document.getElementById("test").dataset.data1
"Не удалось получить свойство "data1" ссылки, значение которой не определено или является NULL"
>> document.getElementById("test").getAttribute("data-data1")
"qwer"
>> document.getElementById("test").getAttribute("data-data2-test")
"asdf"
используем jQuery для чтения, все универсально, и главное, в IE тоже работает как надо
$('#test').data('data1')
"qwer"
$('#test').data('data2-test')
"asdf"
$('#test').data('data2Test')
"asdf"
а сейчас попробуем сохранить данные используя jQuery.data(), и более того сохраним объект содержащий функциювидим результат, с помощью jQuery можем легко воспользоваться сохраненным объектом
но эти данные не появляются в dataset, они сохраняются в кэше jQuery, при первой же попытке получить значение data элемента, jQuery создаст свойство в DOM структуре этого элемента «jQuery + $.now()» и присвоит ему уникальный идентификатор (или ранее), который и будет использоваться как ключ для доступа к кэшу, а так же, скопирует атрибуты data в свой кэш.
$('#test').data('data3', {tt: 10, fn1: function(n){ return this.tt * n + n } })
$('#test').data('data3').fn1(5)
55
document.getElementById("test").dataset.data3
undefined
jQuery1113024019371896630481: 63
jQuery.cache[63]
Object {data: Object, parsedAttrs: true}
jQuery.cache[63].data
Object {data2Test: "asdf", data1: "qwer", data3: Object}
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$.cache[63].data
Object {data2Test: "asdf", data1: "qwer"}
$('#test').attr('data-data1', 'qazwsx')
[<input id="test" type="text" data-data1="qazwsx" data-data2-test="asdf" value="test">]
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf"}
$('#test').attr('data-data3', 'qazwsx')
[<input id="test" type="text" data-data1="qazwsx" data-data2-test="asdf" value="test" data-data3="qazwsx">]
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: "qwer"}
$('#test').data('data1', 123)
[<input id="test" type="text" data-data1="qazwsx" data-data2-test="asdf" value="test" data-data3="qazwsx">]
$('#test').data()
Object {data2Test: "asdf", data1: 123}
$('#test')[0].dataset
DOMStringMap {data1: "qazwsx", data2Test: "asdf", data3: "qazwsx"}
$('#test')[0].dataset.data1 = 777
777
$('#test')[0].dataset
DOMStringMap {data1: "777", data2Test: "asdf", data3: "qazwsx"}
$('#test').data()
Object {data2Test: "asdf", data1: 123}
Итоги:
- data атрибуты загружаются в свойство attributes элемента
- если браузер поддерживает DOMStringMap, то в свойство dataset дублируются все атрибуты data? имена приводятся в верблюжью нотацию, если в имени присутствуют «-«
- jQuery сохраняет копию data атрибутов и более их не обновляет, ни в одну из сторон, jQuery использует javascript для хранения данных, а не DOM, вот тут то плагины jQuery и хранят свои экземпляры
