这是我参与 8 月更文挑战的第 30 天，活动详情查看： 8月更文挑战

不知不觉也来掘金快两个月了，为了感谢掘金读者这段时间的支持，在主页放上了私人微信，有需要技术交流等可直接加阿ken微信与我交流哦

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

DOM下

7.1_排他思想简介

7.1.1_排他思想简介

排他思想，简单理解就是排除掉其他的(包括自己)，然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。
例如，在开发中，如果有同一组元素，我们想要某一个元素实现某种样式，这就需要用到循环的排他思想算法来实现。

案例：演示排他操作，

(1) 编写 HTML 结构代码，示例代码如下。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		
	</body>
</html>

在这里插入图片描述

(2) 编写 JavaScript 代码，实现单击按钮，改变当前按钮背景色效果，示例代码如下，

		<script>
			
			// 获取所有按钮元素
			var btns = document.getElementsByTagName('button');
			
			// btns 得到的是类数组对象，使用btns[i]访问数组里的每一个元素
			for(var i = 0; i < btns.length; i++) {
				btns[i].onclick = function() {
					// (1) 先把所有的按钮背景颜色去掉
					for(var i = 0; i < btns.length; i++) {
						btns[i].style.backgroundColor = '';
					}
					
					// (2)然后设置当前的元素背景颜色
					this.style.backgroundColor = 'pink';
				}
			}
			
		</script>

在这里插入图片描述
当你点击一个按钮时

上述代码中，获取所有按钮元素，存储在 btns 伪数组中。
使用 for 循环遍历伪数组中的每一个元素 btns[i] 。
给每一个元素添加单击事件。
利用 for 循环首先把所有的按钮背景颜色去掉，然后给当前的元素设置背景颜色为 pink 。

7.1.2_[ 案例 ] 鼠标指针经过时背景变色

当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。

(1) 编写 HTML 页面，示例代码如下。

<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>0035**</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
... (此处省略多个tr)
</tbody>
</table>
</body>

(2) 实现鼠标指针经过时背景变色的效果，具体代码如下。

<script>
// 1.获取元素
var trs document.querySelector('tbody').querySelectorAll('tr'); 
// 2.利用循环绑定注册事件
for(var i = 0; i < trs.length; i++) {
// 3.鼠标指针经过事件 onmouseover
trs[i].onmouseover = function() {
this.className = 'bg';
};
// 4.鼠标指针离开事件onmouseout
trs[1].onmouseout = function() {
this.className = '';
};
}
</script>

上述代码中，第 3 行代码把获取到的 tbody 里面所有的行保存在变量 trs 中。第 5 行代码利用 for 循环来为 trs 中的每一个元素绑定事件。第 7 ~ 9 行代码为 trs 中的每个元素绑定 onmouseover 鼠标指针经过事件，当鼠标指针进人的时候给当前 tr 项的类名设置为 bg 。第 11 ~ 13 行代码给 trs[i] 绑定 onmouseout 鼠标指针离开事件，当鼠标指针离开时给当前 tr 项的类名设置为空，去掉当前的背景颜色。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十五）