目录
1. 获取属性值
1） element.属性
2） element.getAttribute('属性')
2. 设置元素属性值
1）element.属性 = '值'
2）element.setAttribute('属性','值')
3. 移除元素的属性 removeAttribute('属性')
tab栏切换案例
4. H5自定义属性
var div = document.querySelector('div');
1. 获取属性值
1） element.属性
获取内置属性值（元素本身自带的）
console.log(div.id);
2） element.getAttribute('属性')
获取自定义的属性, 指的是程序员自己添加的属性
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
2. 设置元素属性值
1）element.属性 = '值'
设置内置元素属性值
div.id = 'test';
div.className = 'naves';
2）element.setAttribute('属性','值')
设置内置对象的属性值
div.setAttribute('index', 2);
div.setAttribute('class', 'footer');
3. 移除元素的属性 removeAttribute('属性')
div.removeAttribute('index');
tab栏切换案例
tab切换分为两个大的步骤
1）头部切换模块，点击某一个，当前的底色切换成红色，其余不变，利用排他思想修改类名的方式
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环给所有的li添加绑定事件
for (var i = 0; i < lis.length; i++) {
// 给每一个li设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 先把所有的li清楚class这个类，排他思想
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 给当前点击的按钮添加上这个类
this.className = 'current';
2、下面的显示内容模块，会随着选项卡变化，所以必须写到点击事件里面
核心思路：给li设置自定义的属性，属性值从0开始，当点击头部当航的某一个li，让下面的内容模块对应序号显示内容，其余的隐藏
var index = this.getAttribute('index');
// console.log(index);
// 排他思想，先让所有的内容模块隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下自己，点击哪一个显示哪一个内容
items[index].style.display = 'block';
}
}
4. H5自定义属性
h5规定自定义的属性 data 开头作为属性名并赋值
H5新增获取自定义属性：element.dataset.index或者element.dataset['index'] ie11以上支持
注意：
1、dataset是一个集合，里面存放了所有以data开头的自定义属性
2、如果自定义属性里面有多个-链接的单词，我们回去的时候采用驼峰命名法例如：div.dataset.listName、div.dataset['listName']
3、只能获取以data开头的自定义属性
