排他算法 · vue

案例：点击按钮，当前按钮背景改变颜色，其他的不变 1. getElementsByTagName(‘button’) 获取的是一个伪数组 2. 这里利用了双重for循环 3. 首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.querySelectorAll('button'); for(var i = 0;i < btns.length; i++){ btns[i].onclick = function() { //按钮绑定循环事件 //（1）我们先把所有的背景颜色去掉 for(var j = 0 ; j<btns.length ; j++) { btns[j].style.backgroundColor = ''; } //（2）然后才让当前元素背景颜色为pink this.style.backgroundColor = 'pink'; } } </script> </body> </html> ``` ![](https://img.kancloud.cn/de/33/de33ee04e781c62da67505fc9fba54ef_354x224.png)