Невозможно использовать 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);