HTML5中用data-*自定义属性

前端

在HTML5中可以用data-*自定义属性，如：

<ul>
<li id="bird" data-animal-type="鸟类">喜鹊</li>
<li data-animal-type="鱼类">金枪鱼</li> 
<li data-animal-type="蜘蛛">蝇虎</li> 
</ul>

h5的data-*属性

1. h5中新增了data-*属性，data-之后的属性是开发者自定义的属性名称，里面可以放置想存储的数据，然后通过数据集dataset来使用
   1.1 var id=document.getElementsByClassName('one')[0].dataset.id;
   // 如果浏览器不支持dataset属性,可以通过setAttribute方法获取
   1.2 var id=document.getElementsByClassName('one')[0].getAttribute('data-id')

2. 可以在列表li中使用data-id,然后每个元素使用方法传递event的时候就会自动传递自己的id，方便选择

3. 如果是触发事件(常问的事件委托应用，通过给ul绑定点击事件，可以确定点击的是哪个li元素)
   想要获取ul>li的索引知道点击了哪个li元素，那就先给每个li添加data-index属性，然后通过e.target.dataset.index来获取