<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
</head>
<body>
<div id="div" data-raw="raw">111111111</div>
</body>
<script>
var $el = $('#div');
var el = $el[0];
function log(name){
console.log($el.data(name));
console.log(el.dataset[name]);
console.log(el.outerHTML);
console.log("-------------------------------------");
}
$el.data('raw','$');
log('raw');
$el.data('raw','raw');
log('raw');
el.dataset.raw='dataset';
log('raw');
el.dataset.raw = 'raw';
log('raw');
//delete el.dataset.raw;
//log(raw);
el.dataset.newRaw = 'newRaw';
log('newRaw');
var obj = {"level":1,"birthday":2};
$el.data("obj",obj);
console.log($el.data('obj')['level']);
</script>
</html>IE11开始支持 HTML5 JS API的dataset，它是就专门用来操作自定义特性（custom attribute，属性的分类请看《 JS魔法堂：特性、属性，傻傻分不清楚》）的对象，其类型为DOMStringMap，从名称可知其为字符串字典。下面结合dataset说明其特点吧，具体如下：
①. dataset针对以"data-"开头的自定义特性操作;
②. 通过形如dataset.rawData获取data-raw-data的属性值；
③. 通过形如dataset.rawData = 'hello world!'给data-raw-data的属性赋值；
④. 通过形如delete dataset.rawData删除属性data-raw-data；
⑤. 通过for in 遍历dataset的属性；
⑥. 属性值必须或将自动转换为String类型；
⑦. 其实它就是除了setAttribute、getAttribute等操作自定义特性的另一个接口而已，而且效率比get/setAttribute低，但大大简化操作代码。
另外，JQuery中也有一个data函数，那么它跟以"data-"开头的自定义特性有什么关联呢？
从上面的实例可知：
调用JQuery的data函数访问属性时，它会在库内部的特性映射表中寻找同属性名的键值对，没有则采取与dataset相同的方式获取属性值，若成功则将在特性映射表中新建一个键值对，然后后续的访问和赋值操作均仅仅针对该键值对。赋值操作时，仅仅在特性映射表中新建键值对，并不会赋值到标签对应的"data-*"特性中。
为何JQuery要设计成这样呢？因为dataset的自定义特性值必须为String类型，赋予其他类型时会发生隐式类型转换，不便于暂存对象、数组等数据。JQuery这种算是折中的做法吧，所以用JQuery的data API操作自定义特性时最好不要跟dataset或get/setAttribute等原生API混合用咯。
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
