DOM：排他思想练习，会使用到嵌套for循环或document.querySelector

<div class="btn">
     <button>按钮1</button>
     <button>按钮1</button>
     <button>按钮1</button>
     <button>按钮1</button>
</div>
<script>
// 点击当前按钮 当前按钮背景颜色变绿 利用排他思想 干掉所有人 留下我自己
let btns = document.querySelectorAll("button");
      for(let i=0; i<btns.length; i++){
          btns[i].addEventListener('click',function(){
			// 外层循环一次，内层循环四次
              for(let i=0; i<btns.length; i++){
                  btns[i].style.backgroundColor = "";
              }
              // 当前点击的按钮颜色变绿
              this.style.backgroundColor = "green";
         	 }
		})      
</script>

不适用嵌套for循环，使用document.querySelector也可以，document.querySelector会返回符合的第一个元素，更方便，
代码如下：

<style>
        .pink {
            background: pink;
        }
</style>
 <button class="pink">第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>
    <script>
        let btns = document.querySelectorAll('button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                // 把html中唯一的有pink类名的移除掉
                document.querySelector('.pink').classList.remove('pink')
                // 我自己添加pink类 用this
                this.classList.add('pink')
            })
        }
</script>