HTML5新特性：自定义数据属性data-

html是允许我们自定义标签和属性的，我们一般经常用自定义属性在界面存储一些数据，类似于使用Hidden控件。

window.onload = function(){  
    console.log($("#test1").attr("name"));  
    console.log(document.getElementById("test2").getAttribute("name"));  
  
    $("#test1").attr("age",25);  
    document.getElementById("test2").setAttribute("age",25);  
}  
  
  
  
    
  
    
    
  

可以看到我们能够像操作html内置属性(name)一样，操作我们自定义的属性(age)。

image

一些常见的前端框架比如angularJS使用了很多自定义的标签和属性，比如ng-model，ng-repeat等。这种自定义属性的方式没有标准，使用也很随意，容易导致混乱和冲突。HTML5规范里增加了一个自定义data属性.自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

比如下面这段html中，我们使用data-*自定义属性。

自定义属性的读取和设置操作方式如下：

    var element = document.getElementById("a");  
    console.log(element.dataset.name);  
    console.log(element.dataset.hobby_list);  
  
    // html里面的连字符转换成驼峰式  
    console.log(element.dataset.configOptions);  
  
    element.dataset.name = "update";  
    element.dataset.non_exsit = "oo";  
  
    // 驼峰式转换成html里面的连字符  
    element.dataset.hisLover = "xx";  
}

最后生成的dom如下图：

image

使用HTML5中自定义属性的几点总结：

1.自定义属性名称不要使用大写字母、连字符等特殊符号。上面我们看到连字符会被转换成驼峰式。我们就用：小写字母和下划线就好了，比如his_lover这种命名方式，既简单易读也不会有特殊字符的影响。

2.js中如果要获取或者设置自定义属性的值，需要去掉data-这个固定前缀。

3.如果修改了自定义属性的值，会导致HTML中dom的刷新。这一点很好理解，这里提一下是因为后面我们会使用jQuery来操作自定义属性，但是jquery不会刷新dom。