此问题在此处已有答案：

Why does querySelector only select the first element and how can I fix this?（4个答案）
7小时前关闭。
编写的代码只在第一个按钮上工作。如何使它在第二个和后面的每个按钮上工作。据说是forEach方法，但我觉得有点迷失在它里面了。提前感谢。

const btns = document.querySelector(".btn")
const div = document.querySelector(".one")

const change = () => {
  div.style.backgroundColor = "black"
}
btns.addEventListener("click", change)

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.one {
  margin: 20px;
  width: 200px;
  height: 200px;
  color: blue;
  background-color: red;
}

.btn {
  padding: 10px;
  margin: 1em;
  background-color: blue;
}

.form {
  flex-direction: column;
  margin: 2em;
}

<div class="box">
  <div class="one">first</div>
  <div class="btn">first button</div>
</div>
<div class="box">
  <div class="one">second</div>
  <div class="btn">second button</div>
</div>
<div class="box">
  <div class="one">third</div>
  <div class="btn">third button</div>
</div>