如何实现点击操作时批量修改所有button按钮的背景颜色

• 第一个错误：document.querySelectorAll('.btn') 返回的是所有匹配元素组成的 NodeList集合，不能直接给整个集合设置 style 属性，需要遍历集合中的每一个元素单独设置样式
• 第二个优化点：代码中反复调用 document.querySelectorAll('.btn') 查询DOM，会造成不必要的性能损耗，建议提前一次查询保存结果
• 额外可优化：旧版var声明的变量存在变量提升问题，实际开发推荐用let/const声明变量

JS代码 #

// 提前一次查询所有按钮，保存为变量
const buttons = document.querySelectorAll(".btn");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function () {
    // 遍历所有按钮逐个设置背景色
    buttons.forEach(btn => {
      btn.style.backgroundColor = "red";
    });
  });
}

HTML代码 #

<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>
<button class="btn">abc</button>

不需要给每个按钮单独绑定事件，性能更好，也兼容后续动态新增的btn元素：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn')) {
    document.querySelectorAll('.btn').forEach(btn => btn.style.backgroundColor = 'red');
  }
})

内容的提问来源于stack exchange，提问作者user8