标签：javascrip this set 操作 驼峰 创建 定义 else html
不久之前我向大家展示了非常有用的classList API，它是一种HTML5里提供的原生的对页面元素的CSS类进行增、删改的接口，完全可以替代jQuery里的那些CSS类操作方法。而另外一个非常有用的API就是 element.dataset API，从火狐6和Chrome8起就开始对它有了支持。这个简单的API能够让用户get或setHTML页面元素上的data-*属性。下面我们来看看它是如何使用的！
想必大家都知道，我们可以给HTML元素添加自定义的data-*属性。你可以给这个属性起任何名字，但在使用element.dataset API时你需要主要以下一些规则：
data-*属性名时，要把名称转变成驼峰式命名(Camel-Case)假设页面里有下面的元素存在：
<div id="myDiv" data-name="myDiv" data-id="myId"
data-my-custom-key="This is the value"></div>
要想获取这个data-id属性，你的代码应该写成这样：
// Get the element
var element = document.getElementById("myDiv");
// Get the id
var id = element.dataset.id;
要想获取data-my-custom-key属性值，你的代码应该写成这样：
// Retrieves "data-my-custom-key" var customKey = element.dataset.myCustomKey;
给自定义属性赋值的方法是这样的：
// Sets the value to something else element.dataset.myCustomKey = "Some other value"; // Element would be: // <div id="myDiv" data-name="myDiv" data-id="myId" // data-my-custom-key="Some other value"></div>
如果一个自定义属性并不存在，但在程序中你给它赋值，它会自动创建：
// Set new data- attribute element.dataset.mootoolsFtw = "true"; // Element would be: // <div id="myDiv" data-name="myDiv" data-id="myId" //data-my-custom-key="Some other value" data-mootools-ftw="true"> //</div>
也许你会认为data-*属性里可以存放对象，但事实上不行，dataset不会初始化这些对象。我不清楚dataset对长度的限制，但在里面存放大量的数据必定会是DOM变得臃肿不堪，很难调试。喜欢使用jQuery的朋友应该知道jQuery里也有相应的$.data()方法，没错，HTML5里的这个原生的dataset就是来替代它的，如果你的页面只需要简单的操作data-*自定义属性，就不需要引入这些体积越来越多的jQuery工具库了，不是吗？
使用HTML5中的element.dataset操作自定义data-*数据
标签：javascrip this set 操作 驼峰 创建 定义 else html
原文地址：http://www.cnblogs.com/xupeiyu/p/5985703.html
