DOM元素属性分为内置属性和自定义属性，比如我们常见的class、id、src、input等属性，都是内置属性，简单理解就是元素自带的属性。而自定义属性就是程序员为了方便使用而自己给元素设置的属性。
1. 获取属性值
① element.属性 获取属性值。
② element.getAttribute('属性');
区别：
(1) element.属性 获取内置属性值（元素本身自带的属性），如img..src
(2) element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性;
2. 设置属性值
① element.属性 = ‘值’ 设置内置属性值。
② element.setAttribute('属性', '值');
区别：
(1) element.属性 设置内置属性值
(2) element.setAttribute(‘属性’,'值'); 主要设置自定义的属性 （标准）
3. 移除属性
① element.属性 = ‘’ 将值设置为空，就相当于移除了内置属性值。
② element.removeAttribute('属性'); 主要移除自定义的属性
4.案例：tab 栏切换
需求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
<!-- css样式 --><style>* {margin: 0;padding: 0;}.tab-box {width: 800px;margin: 50px;}.clear::after {content: "";display: block;clear: both;}.tab-title {height: 50px;background-color: #F9F9F9;}.tab-title li {float: left;line-height: 50px;list-style: none;}a {display: block;color: #666;text-decoration: none;padding: 0 30px;}.current {color: #fff;background-color: #DE3A38;}.item {display: none;margin-top: 10px;height: 160px;padding: 20px;background-color: lightpink;}</style><body><!-- html结构 --><div class="tab-box"><div class="tab-title"><ul class="clear"><li><a href="#" class="current">商品介绍</a></li><li><a href="#">规格与包装</a></li><li><a href="#">售后保障</a></li><li><a href="#">商品评价</a></li></ul></div><div class="tab-content"><div class="item" style="display: block;">商品介绍对应版块的内容</div><div class="item">规格与包装对应版块的内容</div><div class="item">售后保障对应版块的内容</div><div class="item">商品评价对应版块的内容</div></div></div><!-- js代码 --><script>// 1. 获取元素let as = document.querySelectorAll('.tab-title li a');let items = document.querySelectorAll('.tab-content .item');// 2. 循环遍历给每个a绑定事件for (let i = 0; i < as.length; i++) {as[i].onclick = function() {// 然后给其添加自定义属性index，等同于索引号this.setAttribute('index', i);// 利用排他思想为其添加类名current,表示点中的这个选项栏样式特别// (1) 先给所有a 清除类名current(干掉所有人)as.forEach(item => {item.className = '';});// (2) 给当前的a添加类名current(留下我自己)this.className = 'current';// 点击a对应的内容模块要显示出来，利用刚刚设置的自定义属性index// (1) 获取index的属性值，定义变量index接收let index = as[i].getAttribute('index');// (2) 使用index作为下标获取对应版块的内容，同样需要利用排他思想items.forEach(item => {// 先让所有的item都隐藏（干掉所有人）item.style.display = 'none';});// 让对应版块的item显示（留下需要的）items[index].style.display = 'block';};}</script></body>案例分析：
① Tab栏切换有2个大的模块
② 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类
名的方式
③ 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④ 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤ 核心思路： 给上面的tab_title里面的所有小a 添加自定义属性，属性值从0开始编号。
⑥ 当我们点击tab_title 里面的某个小a，让tab_content 里面对应序号的内容显示，其余隐藏（排他思想）
5.H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
(1) 设置H5自定义属性
H5规定自定义属性以data-开头作为属性名并且赋值。
比如 <div data-index=“1”></div> 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)
(2) 获取H5自定义属性
① 原来获取自定义属性的方式依旧起效： element.getAttribute(‘data-index’);
② H5新增方式： element.dataset.index 或者 element.dataset[‘index’] 具有兼容性问题
