1.排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
自定义属性操作
1.获取属性值
（1）元素对象.属性名
（2）元素对象.getAttribute('属性名')
2.设置属性值
（1）元素对象.属性名 = '属性值'
（2）元素对象.setAttribute('属性名','属性值')
3.两种方法的区别
第一种方法主要用来获取/设置内置属性值（元素自带的属性）
第二种方法主要用来获取/设置自定义的属性值
class属性的获取和设置比较特殊，原来的方法用className,新方法用class
// class属性比较特殊
demo.className = 'box2';
console.log(demo.className);
demo.setAttribute('class','box3');
console.log(demo.getAttribute('class'));
4.移除属性
元素对象.removeAttribute('属性名')
5.tab栏切换案例
①tab栏切换有两个大的模块
②上面模块是选项卡，点击某一个，他的底色会改变，其余的不变（排他思想）
③下面的模块放内容。会根据上面的选项卡切换。所以下面的模块写到点击事件里面
④核心思路：用循环给上面table_list中所有的小li添加自定义属性，编号从0开始。将li的编号取出并赋值给table_content
⑤当我们点击table_list中的某个小li，让table_content中对应序号的内容显示，其余隐藏（排他思想）。
<div class="table">
<div class="table_list">
<ul>
<li><a href="#">商品介绍</a></li>
<li><a href="#">规格与包装</a></li>
<li><a href="#">售后保障</a></li>
<li><a href="#">商品评价（1.1w+）</a></li>
</ul>
</div>
<div class="table_content">
<div class="item" style="display: block">商品介绍的内容</div>
<div class="item">规格与包装的内容</div>
<div class="item">售后保障的内容</div>
<div class="item">商品评价的内容</div>
</div>
<script>
// 第一步：实现②的内容
// 1.获取事件源
var lis = document.querySelector('.table_list').getElementsByTagName('li');
var items = document.querySelectorAll('.item');
// 2.注册事件 程序处理
for (var i = 0; i < lis.length; i++) {//利用循环给每个li绑定事件
lis[i].setAttribute('index', i);//先给每个选项卡添加自定属性：index
lis[i].onclick = function () {
// 实现第②步功能
for (var j = 0; j < lis.length; j++) {//排他思想
lis[j].style.backgroundColor = '#efefef';
}
this.style.backgroundColor = '#c81526';
// 实现第⑤步功能
var index = this.getAttribute('index');
for (var k = 0; k < items.length; k++) {//排他思想
items[k].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
H5新增的自定义属性（ie11以上）
1.自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
2.但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。所以H5给我们新增了自定义属性：
在H5中，获取和设置自定义属性时，在属性名前面添加“data-”。
如：<div data-index="1"> </div>
元素对象.getAttribute('data-index')
元素对象.setAttribute('data-index' , '1')
H5新增了两种获取元素的自定义属性的方法：
（1）元素对象.dataset.自定义元素属性名 元素对象.dataset.index
（2）元素对象.dataset[' 自定义元素属性名 '] 元素对象.dataset[' index ']
注意：
（1）这两种方法只能获取到以“data-”开头的自定义属性。
（2）当自定义属性名称以多个“-”连接时，获取该自定义属性时，属性名采取驼峰命名法。
节点操作
1.节点概述
（1）网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
（2）HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
（3）节点就是用来获取元素对象的。
（4）节点就是元素对象
2.一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为1
- 文本节点 nodeType为1（文本节点包含文字、空格、换行等）
注意：实际开发中主要操作元素节点。
3.父节点
格式：子节点.parentNode
注意：
（1）父节点返回的是亲爹
（2）如果某节点没有父节点，则返回null
<div class="father">
<span class="son"></span>
</div>
<script>
// 获取元素对象
var son = document.querySelector('.son');
var father = son.parentNode;
console.log(father);
</script>
4.子节点
返回所有子节点的伪数组集合：
（1）父节点.childNodes
特点：返回指点父节点的所有子节点的集合，该集合为即时更新的集合。
注意：返回的集合包含了所有子节点，包括元素节点、文本节点等。
（2）父节点.children （重点掌握）
注意：这是一个只读属性，返回的集合只包括元素节点。
返回第一个或最后一个子节点：
（1）父节点.firstchild
父节点.lastchild
（2）父节点.firstElementchild
父节点.lastElementchild
注意：第一种方法返回的子节点包含元素节点、文本节点等。
第二种方法只返回子元素节点，但是有兼容性问题。
实际应用：返回第一个或最后一个子元素节点（重点掌握）
父节点.children[0]
父节点.children[父节点.children.length-1]
5.兄弟节点
（1）节点.nextSibling
节点.previousSibling
注意：这个方法得到的兄弟节点包含元素节点和文本节点等。
（2）节点.nextElementSibling
节点.previousElementSibling
注意：这个方法可以获得兄弟元素节点，但是有兼容性问题
6.创建和添加节点
（1）创建节点
格式：document.createElement( ' 标签名 ' ) 返回值是新创建的节点
例如：var li = document.createElement( ' li ' )
（2）添加节点
格式：父节点.appendChild（子节点）
特点：这个方法会将子节点添加到指定父节点的子节点列表末尾
格式：父节点.insertBefore（子节点，指定子节点）
特点：这个方法会将子节点添加到指定父节点的指定子节点前面
<ul>
<li>我是原本就有的</li>
</ul>
<script>
// 第一步：创建节点
var li = document.createElement('li');
var ul = document.querySelector('ul');
// 第二步：添加节点
ul.appendChild(li);
// 第二步：添加节点
ul.insertBefore(li,ul.children[0]);
</script>
7，删除节点
格式：父节点.removeChild（子节点）
特点：返回值为删除的节点
补充：阻止a链接跳转，可以在href中写上 javascript:;
8.复制节点
格式：被复制节点.cloneNode() 返回值是复制的节点
注意：（1）复制节点后也需要添加节点
（2）如果参数为空或false，则为浅拷贝，只复制节点本身，不复制节点里的内容。
（3）如果参数为true，则复制节点以及节点里面的所有内容。
9.innerHtml和document.createElement()
- 这两个方法都能通过js在页面中添加新元素。
- 用innerHTML添加元素效率更高。（不要用拼接字符串的方式，采用拼接数组的方式）但结构较为复杂。
- 用document.createElement()方法效率稍低，但结构更清晰。
同样是添加100个a标签，两种方法如下：
<div class="inner"></div>
<div class="create"></div>
<script>
// 1.innerHTML 使用数组在页面中添加元素----------------------------------效率最高
var inner = document.querySelector('.inner');
var arr = [];//首先创建一个空数组
for (i = 0; i < 100; i++) {
arr.push('<a href="#">吴磊</a>');//在数组中追加元素
}
inner.innerHTML = arr.join(',');//将数组转换成字符串后，赋值给inner对象
// 2.document.createElement()在页面中添加元素
var create = document.querySelector('.create');
for (var i = 0; i < 100; i++) {
var a = document.createElement('a');
a.innerHTML = '王祖贤';
create.appendChild(a);
}
总结
