如何通过 class 名称正确定位？

Question

我正在尝试在 JS 上练习一些东西，我想在点击时切换多个 div 以更改它们的颜色，但我似乎无法正确定位第一个。当我通过标签名称完成时很好，但通过 class 它似乎不起作用。我究竟做错了什么？谢谢！

编辑。这是您更正后我的代码的样子。

<body>
    <div class="container">

        <div class="one">

        </div>
        <div class="two">

        </div>
        <div class="three">

        </div>
        <div class="four">

        </div>

    </div>

    <script src="script.js"></script>
</body>

let boxOne = document.getElementsByClassName("one")[0]

boxOne.onclick = function() {
    alert("Clicked!")
}

Answer 1

文档。

getElementsByClassNamereturns 具有该类名（无点）的元素数组
querySelector 用于 css 选择器（例如“.one”、“div.one”）
querySelectorAll 喜欢 2。但是 returns array

Answer 2

这一行：document.getElementsByClassName(".one")[0] 您已经定位到 div，因此更改此设置： boxOne[0].onclick = 对此： boxOne.onclick =

Answer 3

我要补充一点，如果选择器只被一个元素使用，最好分配一个 id 并使用 getElementById。

let boxOne = document.getElementById("one");
let allBoxes = document.getElementsByClassName("square");

boxOne.onclick = function() {
  alert("Clicked via ID");
}
const arr = [1, 2, 3];
arr.forEach(i => {
  allBoxes[i].onclick = function() {
    alert("Clicked via Class");
  }
})

.square {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 20px;
  font-size: 50px;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

<body>
  <div class="container">

    <div class="square" id="one">
      1
    </div>
    <div class="square" id="two">
      2
    </div>
    <div class="square" id="three">
      3
    </div>
    <div class="square" id="four">
      4
    </div>

  </div>


</body>

Answer 4

let boxOne = document.getElementsByClassName("one")[0]

boxOne.onclick = function() {
    alert("Clicked!")
}

div {
  width: 100px;
  height: 100px;
  margin: 30px;
  background: blue
}

<body>
    <div class="container">

        <div class="one">

        </div>
        <div class="two">

        </div>
        <div class="three">

        </div>
        <div class="four">

        </div>

    </div>

    <script src="script.js"></script>
</body>

如何通过 class 名称正确定位？

How to correctly target by class name?

javascript

class

toggle

target