querySelector和getElementById的区别，官方解释为：
"querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"
其实就是getElementById获取的是动态集合，会随着dom结构的变化而变化，每一次调用list都会重新对文档进行查询，有时可能会导致无限循环的问题。
querySelector 获取的是静态集合，不管后续再动态添加了多少新值，都是不会对其参数影响。
动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。
总结
如果只要一次查找就可得到元素时，首选getXXXByXXX ；
如果需要经过多级查找，才能得到元素时，首选querySelector；
了解完这些后，再写出一个tab切换来练手，首先，生成两个伪数组
图片.png
图片.png
首先，先用for循环进行遍历，设置一个属性，保留当前选中的下标
图片.png
遍历之后，将遍历到的值写入，发现最后所有点击添加过的都会保留，此时，便要用到排他思想，去除除点击保留之外的所有active属性，让他们不再同时出现
图片.png
经过这次循环后，每循环一次，都会清除除选定之外的所有拥有active属性的节点
最后，
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 600px;
height: 500px;
background-color: none;
margin: 30px auto;
}
.box ul {
float: left;
}
.box ul:nth-child(1) {
width: 120px;
height: 480px;
background: #323232;
color: #fff;
text-align: center;
}
.box ul:nth-child(1) li {
height: 60px;
line-height: 60px;
}
.box ul:nth-child(1) .active {
background: #fff;
color: #000;
}
.box ul:nth-child(2) li {
width: 480px;
height: 480px;
background-color: #fcf;
display: none;
}
.box ul:nth-child(2) .active2 {
display: block;
font-size: 30px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<ul class="left_ul">
<li class="active">机票</li>
<li>火车票</li>
<li>酒店</li>
<li>景点</li>
<li>周边游</li>
<li>境内游</li>
<li>出境游</li>
<li>邮轮</li>
</ul>
<ul class="right_ul">
<li class="active2">机票点击事件</li>
<li>火车票点击事件</li>
<li>酒店点击事件</li>
<li>景点点击事件</li>
<li>周边游点击事件</li>
<li>境内游点击事件</li>
<li>出境游点击事件</li>
<li>邮轮点击事件</li>
</ul>
</div>
<script>
var left_li = document.querySelectorAll('.left_ul li');
var right_li = document.querySelectorAll('.right_ul li');
//获取一组元素的快照，组成伪数组
for (var i = 0; i < left_li.length; i++) {
left_li[i].index = i;
//鼠标点击的项会保存
left_li[i].onclick = function () {
//点击事件,重新遍历每一项，删除除点击项之外的所有class名
for (var j = 0; j < left_li.length; j++) {
left_li[j].className = '';
right_li[j].className = '';
}
left_li[this.index].className = 'active';
right_li[this.index].className = 'active2';
//为点击保存的项赋予clss名active
}
}
</script>
</body>
</html>
网友评论