HTML5中的data-id与id

在HTML5中增加了一项新的功能：自定义数据属性，也就是"data-*"自定义属性。在h5中通过使用data-为前缀来设置我们需要的自定义属性来进行一些数据的存放，在高级浏览器下可以通过脚本进行定义和数据存取。

<div id="div1" class="div1" data-id="ownId" data-fruit="ownFruit" data-id-and-fruit="a"><!--以上都成立-->

区别

id是选择器，data-id只是行内存放数据的标签，等同于input中的value的作用。

获取data-id的值

方法一：使用attribute方法存取data-*
attributes属性返回指定节点属性的集合，返回的是NamedNodeMap对象。

var div=document.getElementById("div1");
var ownId=div.getAttribute("data-id");
var ownFruit=div.getAttribute("data-fruit");
console.log(ownId)//ownId
console.log(ownFruit)//ownFruit
//设置自定义值
div.setAttribute("data-name","hi")

方法二：使用dataset属性存取
这个属性是h5 js API的一部分，用来返回一个所有选择元素的data-*属性的DOMSringMap对象，用这种方法时，要去掉前缀。同时，data-属性名如果包含连字符，data-id-and，连字符将被去掉并且转换为驼峰式命名。
但是要注意的是这个属性只有在Chrome8+、Firefox（gecko）6.0、IE11+、Opera11.10+、Safari6+浏览器中实现，所以最好还是先使用getAttribute和setAttribute来操作。

var div=document.getElementByid("div1");
var att=div.attributes;
var data=div.dataset;
var id=div.id;
var ownId=data.id;
var abc=data.idAndFruit;
console.log(att);//NamedNodeMap对象
console.log(data);//DOMStringMap对象
console.log(id);//div1
console.log(ownId); //ownId
console.log(abc); //a