단일 요소에 대해 querySelectorAll을 사용할 수 없습니까?

Question

정상적인 상황에서는 querySelector를 사용하여 단일 요소를 선택하고 multiple을 위해 querySelectorAll을 사용한다는 것을 알고 있습니다. 그러나 querySelectorAll이 단일 요소에서 작동하지 않는다는 사실에 놀랐습니다. 나는 그것이 하나 이상의 사람들과 함께 일할 것을 기대했다. 나는 그것을 말하고있는 무엇이든을 찾아 낼 수 없다 는 단지 1 개와 함께 일하지 않아야한다 그래서 나는 그것이 정상적이고 spec에 따르면 여기에서 질문하고 있기 때문에 일하는가 안된다?

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] 주) 않습니다 [0] === document.querySelector (". 맨 ')'(". 맨 ')

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