不能将querySelectorAll用于单个元素？

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);