JavaScript高级程序设计之DOM 扩展之HTML5之自定义数据属性第11.3.5讲

HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的

信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来看一个例子。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

添加了自定义属性之后，可以通过元素的dataset 属性来访问自定义属性的值。dataset 属性的
值是DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个data-name 形式
的属性都会有一个对应的属性，只不过属性名没有data-前缀（比如，自定义属性是data-myname，
那映射中对应的属性就是myname）。还是看一个例子吧。

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链
接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪个部分。
在编写本书时，支持自定义数据属性的浏览器有Firefox 6+和Chrome