html5 自定义实体,HTML5 自定义属性

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

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

data-name:dataset.name

data-name-first:dataset.nameFirst

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属性上。