自定义属性的操作

获取属性值

方法1，element.属性
方法2，element.getAttribute('属性');

区别：
element.属性 获取内置属性值（元素本身自带的属性）。它不能获取到自定义属性。如果用它获取自定义属性，即使自定义属性有值也是返回undefined

element.getAttribute(‘属性’);
主要获得自定义的属性 （标准） 我们程序员自定义的属性。虽然它也可以获取到内置的属性值。

设置属性值

方法1，element.属性 = ‘值’
方法2，element.setAttribute('属性', '值');

自定义属性的操作
区别：
element.属性 设置内置属性值

element.setAttribute(‘属性’); 主要设置自定义的属性 （标准。 虽然它也可以设置内置的属性值。
注意用这种方式设置class就是element.setAttribute(‘lalss’，值);而不是className

移除属性

element.removeAttribute('属性'); 

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：

1. 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。 比如

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

或者使用 JS 设置

element.setAttribute(‘data-index’, 2) 

2. 获取H5自定义属性

1. 兼容性获取 element.getAttribute(‘data-index’);
2. H5新增 element.dataset.index 或者 element.dataset[‘index’]
   ie 11才开始支持 ，兼容不太好，所以一般都用第一种方法获取
   dataset是一个集合，存放了所有以data-开头的自定义属性

注意：如果data-的自定义属性名称中还有 - ，那么第二种方法就要用驼峰来获取

<div getTime="20" data-index="2" data-list-name="andy"></div>

console.log(div.getAttribute('data-list-name'));
console.log(div.dataset.listName);
console.log(div.dataset['listName']);