H5的自定义属性你了解吗？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

这是H5系列的第5篇，关于自定义属性

更多相关的内容，可以移步以下链接：

1. 关于H5的相关知识点小结
2. 关于H5的Input学习小结
3. H5新增表单元素和表单属性
4. 关于H5视频和音频

我们知道，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。
格式： (1)在行间上定义自定义属性

<div id="test" data-first-name="liao">
  there is codes
 </div>

(2)通过js来设置自定义属性或者读取自定义属性值

<script>
var temp = document.getElementById('test');
//1.设置自定义属性
temp.dataset.lastname= 'xiaojin'; //或者temp.dataset['lastname'] = 'xiaojin';
//2.读取自定义属性值
temp.dataset.lastname;//或者temp.dataset['lastname'] 
temp.dataset.firstName;//或者temp.dataset['firstName'] 
</script>      

自定义属性规范：

1. data-开头；
2. data-后必须至少有一个字符，多个单词使用-连接； 建议：
3. 名称应该都使用小写；
4. 名称中不要包含任何的特殊符号；
5. 名称不要纯数值

data-/dataset与getAttribute/setAttribute相比

1. 两者都把属性设置到了attribute上
2. 用data-*，一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历什么的很方便