H5自定义属性

自定义属性的目的：时为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库

自定义属性获取是通过console.log(div.getAttribute('属性));获取。

但是有些自定义属性很容易引起歧义，不容易判断元素是内置属性还是自定义属性。

H5新增了自定义属性：

1.设置H5自定义属性

H5规定自定义属性  data-  开头做为属性名并赋值

比如 

或使用JS设置

element.getAttribute('data-index',2)
 

<div getTime = "20" data-index = "2" data-lest-name="ady"></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			// 输出
			console.log(div.getAttribute('getTime'));
			// 添加一个自定义的属性
			div.setAttribute('data-time',20);
			
			// 获取h5自定义属性可选择
			// 1.兼容性较好  element.getAttribute('data-index');
			console.log(div.getAttribute('data-index'));
			
			// 2.H5新增 : element.dataset.index 或者 element.dataset['index']  ie11  才开始支持 
			// 虽然ie已经凉凉了，但是很多网站维护还是能用到的
			// dataset 是一个集合里面存放了所有以   data-  开头的自定义属性
			console.log(div.dataset.index);
			console.log(div.dataset['index']);
			
			// data-lest-name  如果遇到这种自定义属性里面有多个链接的单词，
			// 我们获取的时候就采取驼峰命名法             lestName
			console.log(div.dataset.lestName);
			console.log(div.dataset['lestName']);
		</script>

 1.兼容性较好  element.getAttribute('data-index');            ----常用，因为兼容性好

多个自定义属性的多个链接的话，我们采用驼峰命名法

dataset - - - 是一个集合，里面存放了所有以   data-  开头的自定义属性