Question

据我所知，在正常情况下，您可以使用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返回NodeList，而不是单个元素（即使查询结果只是一个元素）。所以你试图将一个事件监听器附加到该NodeList，而不是一个元素。

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

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

不能将querySelectorAll用于单个元素吗？

1 个答案: