Javascript Can'；是否对单个元素使用querySelectorAll？

我知道在正常情况下，您会使用querySelector选择单个元素，并使用querySelectorAll选择多个元素。然而，我惊讶地发现querySelectorAll不能与单个元素一起工作。我希望它能与一个或多个应用程序一起工作。我找不到任何东西，说它不应该只与一个工作，所以我在这里问，如果这是正常的，并根据规范

HTML:

与此配合使用（调用dragStart函数）：

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

---

querySelectorAll

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

这确实有效（请注意

[0]

）：

var-topPods=document.queryselectoral（“.top”）；
topPods[0]。addEventListener（“dragstart”，dragstart）；

querySelectorAll

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

这确实有效（请注意

[0]

）：

var-topPods=document.queryselectoral（“.top”）；
topPods[0]。addEventListener（“dragstart”，dragstart）；

document.queryselectoral（“.top”）[0]==document.querySelector（“.top”）

-前者返回类似数组的对象，后者返回单个项。另请参见

document.queryselectoral（.top”）[0]==document.querySelector（.top”）

-前者返回类似数组的对象，后者返回单个项。另请参见。。。这就是为什么在您知道只有一个元素可以使用的情况下使用querySelector的全部原因。当然，OMG。事实上我知道这一点，但错过了。全脑放屁。出于尴尬，我会删除这个问题，但其他人可能有一天也会有同样的大脑放屁。英雄联盟这就是为什么在您知道只有一个元素可以使用的情况下使用querySelector的全部原因。当然，OMG。事实上我知道这一点，但错过了。全脑放屁。出于尴尬，我会删除这个问题，但其他人可能有一天也会有同样的大脑放屁。英雄联盟

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

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

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

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