DOM对象的dataset属性

email：gm4linus at gmail dot com

你可能在HTML代码中看到很多人写类似如下的代码

<div data-id="id" data-age="age" id="user">display name</div>

其实这是HTML5规范的一部分，DOM对象中有个dataset属性对象，可以在该对象中存一些与该DOM对象相关的数据。如上写法是在生成dom对象时对dataset的一个初始化的动作，dataset中会存在一个id属性和age属性。这里需要注意data-仅仅是一个约定好的前缀，在生成DOM对象时所有已data-开头的属性会将其去掉前缀data-后存在dataset中。

从http://caniuse.sinaapp.com/html/item/dataset/index.html可以看出该属性的浏览器兼容性还是不错的，在不兼容的浏览器中可以使用getAttribute之类的方法来降级使用。

js示例如下：

var dataset = document.getElementById("cuebar");

if( '18' === dataset.dataset['age'] ){
	console.log(' is 18');
}

dataset['oox'] = 'some value';

dataset['id'] = 'new id';

需要注意的是dataset中的属性值只能是字符串，非字符串会转换为字符串后存储，所以要存对象类型是务必小心。