DOM：获取自定义属性的两种方法，及自定义属性的规范

使用自定义属性的目的，是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中，使用起来会比较方便。
但有些自定义属性我们会不容易判断，不知道到底是内置属性还是自定义属性。
因此，在H5中给我们新增了自定义属性：
H5规定自定义属性以data-开头作为属性名并赋值。

<div data-index = 1></div>

或者也可以使用JS设置一个自定义属性：

element.setAttribute("data-index",0);

<div data-index = 1 ></div>
<script>
	var data = document.querySelector("div");
	console.log(data.getAttribute("data-index")); // 获取自定义属性
	data.setAttribute("data-name","Tom"); // 设置自定义属性
</script>

除了element.getAttribute(“data-index”);可以获取到自定义属性外，H5新增了element.dataset.index或element.dataset[index]也可以获取到自定义属性，但IE11才开始支持。
index就是data-后面的内容，比如自定义属性是data-name，可以写element.dataset.name或element.dataset[name]
如果自定义属性里有多个-链接的单词，获取的时候采取驼峰命名法。

 <div data-index = 1 data-name = "Tom" data-index-age></div>
<script>
	var data = document.querySelector("div");
	// 也可以写成data.dataset[index]
	console.log(data.dataset.index);
	console.log(data.dataset.name);
	console.log(data.dataset.indexAge); // 使用驼峰命名法
</script>