无法对单个元素使用 querySelectorAll 吗？ [复制]

据我所知，在正常情况下，您会使用 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);

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

这确实有效（注意[0]):

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