不能对单个元素使用 querySelectorAll 吗？

Question

我知道在正常情况下，您会对 select 单个元素使用 querySelector，而对多个元素使用 querySelectorAll。但是，我惊讶地发现 querySelectorAll 不适用于单个元素。我希望它能与一个或多个一起工作。我找不到任何说明它 不应该 只与一个一起工作所以我在这里问这是否正常并符合规范？

HTML:

<div class="top container">
  <div class="pod" draggable="true">big</div>
  <div class="pod" draggable="true">small</div>
  <div class="pod" draggable="true">happy</div>
  <div class="pod" draggable="true">rich</div>
  <div class="pod" draggable="true">fast</div>
</div>

JS:

function dragStart(e) {
  console.log("drag started");
  e.target.style.opacity = "0.5";
}

适用于此（调用 dragStart 函数）：

var topPods = document.querySelector(".top");
topPods.addEventListener("dragstart", dragStart);

但不适用于此（未调用 dragStart 函数）：

var topPods = document.querySelectorAll(".top");
topPods.addEventListener("dragstart", dragStart);

Answer 1

querySelectorAll returns 一个NodeList，不是单个元素（即使查询结果只有一个元素）。因此，您正在尝试将事件侦听器附加到该 NodeList，而不是元素。

这确实有效（注意 [0]）：

var topPods = document.querySelectorAll(".top");
topPods[0].addEventListener("dragstart", dragStart);

不能对单个元素使用 querySelectorAll 吗？

Can't use querySelectorAll for a single element?

javascript

html

selectors-api