什么是排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，接下来用代码进行演示
目录
首先：框架，这里我们先添加上5个按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
</script>
</html>
第二步：js代码获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
</script>
</html>
第三步：添加点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
btns.onclick = function(){
}
</script>
</html>
这里的话我们的目的是给每一个按钮添加一个点击事件，但queeryselectorall 有一个重点，他获取到的是一个伪数组，所以我们这样写是错的，要借助for循环来遍历出每一个元素
第四步：修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
}
</script>
</html>
这样的话就成功给每一个按钮添加上了点击事件，接下来我们给这些按钮添加一个点击改变背景颜色的效果
第五步：添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
this.style.backgroundColor = 'red'
}
}
</script>
</html>
大家会看见我点击了2个按钮，但2个按钮却都红了，这显然不是我们想要的效果，所以我们要用到排他思想来写
第六步：排他
排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，一定要记住顺序不能颠倒，首先清除所有样式，然后在设置自己。清除所有样式，那怎么才能把所有的样式清除呢，所以这里又要借助for循环遍历给每一个元素清除样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<script>
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
for(var i=0;i<btns.length;i++){
btns[i].style.backgroundColor = 'yellow'
}
this.style.backgroundColor = 'red'
}
}
</script>
</html>
这样的话就达到了我们想要的效果，这里为了方便观察，我给每一个元素添加了黄色背景
