我们知道JS有三部分组成 ，分别是js语法基础 ， DOM和BOM三部分组成 ，js基础我们已经说过了，但是只知道了语法基础是没法做出网页交互的 ，网页制作是通过浏览器提供的API关于DOM的各种操作方式配合JS语法基础提供逻辑算法来改变网页的内容样式，为我们的网页增加交互效果
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。
我们昨天说过了DOM属性操作的一些基础知识 ，比如操作DOM改变元素内容 ，改变元素属性 ，改变元素样式等等
下面我们继续来说一说DOM的属性操作更加深入地运用
网页中常见的切换栏
之前我们在做DOM操作的都是单一元素的一些内容改变 ，属性操作 ，但是在工作中我们可以看到不管是在浏览百度 ，还是其他各种网站总是少不了像百度里面这种切换栏目展示不同内容的多组数据交互的效果 ，那这种效果又是怎么做的呢？必须知道哪些web api的操作
1.排他算法
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
1.除了自己其他所有元素全部清除样式(排除异己)
2.给当前元素设置样式(唯我独尊)
排他six
排他six
排他思想在网页中的运用是非常多的 ，比如百度首页的换肤效果 ，一些表格的隔行变色 ，全选和反选等等都可以用排他来做 ，下面我们来看看百度换肤的做法
百度换肤
DOM属性操作
排他做法
我们发现运用排他算法 ，我们做出来的都是一组数据变化 ，还是达不到百度等网站上面那种切换栏目的同时下面的内容也同时切换 ，现阶段我们只是一组数据自身属性的切换 ，那么我们该怎么做让内容随着栏目切换的交互效果呢？
内容随着栏目切换的效果怎么做呢
2.DOM操作的自定义属性操作
昨天我们说的基本上都是元素本身自带的属性 ，比如图片的路径src ，内容的标题title ，还有表单元素的 ，disabled禁用和checked选择等等一些自带的属性 ，那么我们能不能操作一些我们自定义的属性呢？
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
获取元素自身属性的方法是：element.属性
获取自定义属性的方法是：element.getAttribute(属性) ，get得到获取的意思 attribute 是属性的意思 我们开发者自己添加的属性我们称为自定义属性 index
<div id="demo" index="1" class="box1"></div>
<div id="demo" index="2" class="box2"></div>
有两个元素 ，当我们通过DOM获取到元素后 ，就可以通过这种方法拿到自定义的属性了div.getAttribute(index)
我们不过能够获取自定义属性 ，同时也能设置 ，移除自定义属性：
设置自定义属性：element.setAttribute(属性, 值) ，div.setAttribute(index, 2)
移除自定义属性： removeAttribute(属性) ，div.removeAttribute(index)
自定义属性的获取设置和yic
利用这些自定义属性的获取方法 ，搭配昨天说的DOM元素的操作 ，才能做出我们想要的选项和内容交互的效果
配合自定义属性切换选项和内容
3.H5新改动的自定义属性操作
获取是通过element.getAttribute(‘data-index’) 获取。
h5新增的获取自定义属性的方法 它只能获取data-开头的自定义属性，也就是说为了统一规范 ，我们在自定义属性的时候必须以data-开头比如data-index="1"
然后通过dataset 使用属性 ，dataset 是一个集合里面存放了所有以data开头的自定义属性
用法是dataset[index]或者dataset.index ，但是现在有很多pc端浏览器都不支持 ，ie11以后才支持
JavaScript的DOM属性操作昨天内容加今天的内容基本就这些了 ，接下来是DOM节点的操作
