获取属性值
在DOM操作中，提供了两种获取属性值的方式，第1种是通过getAttribute()方式，该方式可以获取内置属性或者自定义属性；第2种是使用HTML5新增的“element.dataset.属性”或者“element.dataset['属性'] ”方式。推荐使用第1种，因为第2种有兼容性问题，从IE11才开始支持。
下面我们通过案例形式演示如何获取属性值，示例代码如下。
1 <body>
2 <div getTime="20" data-index="2" data-list-name="andy"></div>
3 <script>
4 var div = document.querySelector('div');
5 console.log(div.getAttribute('data-index')); // 结果为：2
6 console.log(div.getAttribute('data-list-name')); // 结果为：andy
7 // HTML5新增的获取自定义属性的方法，只能获取“data-”开头的属性
8 console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
9 console.log(div.dataset.index); // 结果为：2
10 console.log(div.dataset['index']); // 结果为：2
11 console.log(div.dataset.listName); // 结果为：andy
12 console.log(div.dataset['listName']); // 结果为：andy
13 </script>
14 </body>上述代码中，第8行代码中的dataset是一个集合，里面存放了所有以data开头的自定义属性。如果自定义属性里面包含有多个连字符（-）时，获取的时候采取驼峰命名法，例如，第11、12行中的listName。
点击此处
隐藏目录
隐藏目录
