HTML5 自定义属性

自定义属性：添加前缀“data-”

dataset属性：添加自定义属性后，通过元素的dataset属性来访问自定义属性的值(属性名没有data-前缀)
data-name:dataset.name
data-name-first:dataset.nameFirst

 <div id="div1" data-name="china" data-name-all="chinese">div</div>

1.利用 getAttribute、setAttribute 存取 dataset

var oDiv = document.getElementById("div1");

//get
console.log(oDiv.getAttribute("data-name")); // china
console.log(oDiv.getAttribute("data-name-all")); // chinese


//set
oDiv.setAttribute("data-name","hello");
oDiv.setAttribute("data-name-all","hi");

这样就可以以一种更兼容的方式，来存取dataset数据。所做出的任何更改，都是可以实时反映到元素data属性上的。

但是这种方法比较低端，如果遇到多个data-*自定义字段，想要一次全部获取所有的data属性并包装成对象的话，还必须做一个循环，很麻烦。

2.利用 dataset API 存取 dataset

var oDiv = document.getElementById("div1");

//get
console.log(oDiv.dataset.name); // china
console.log(oDiv.dataset.nameAll); // chinese


//set
oDiv.dataset.name = 'hello';
oDiv.dataset.nameAll = 'hi';

3.利用 jQuery.attr 方法存取 dataset

//get
console.log($('#div1').attr('data-name')); // china
console.log($('#div1').attr('data-name-all')); // chinese


//set
$('#div1').attr('data-name', 'hello');
$('#div1').attr('data-name-all', 'hi');

4.利用 jQuery.data 方法存取 dataset

//get
console.log($('#div1').data('name')); // china
console.log($('#div1').data('nameAll')); // chinese


//set
$('#div1').data('name', 'hello');
$('#div1').data('nameAll', 'hi');

这样的方法也能出色的存取data属性，但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。