無法爲單個元素使用querySelectorAll？

我明白，在正常情況下，您會使用querySelector爲多個選擇單個元素和querySelectorAll。但是，我驚訝地發現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);

來源

2017-02-14 AlwaysLearning

'document.querySelectorAll [0] === document.querySelector（「頂部」）' - 前者的收益類似數組的對象，後者返回一個單一的項目。 –

另請參見[將可迭代元素或非可迭代元素展開到數組中，而不檢查元素.length]（http://stackoverflow.com/questions/40198807/expand-an-iterable-element-or-non-iterable-element -into-an-array-without-checkin） – guest271314

querySelectorAll返回一個NodeList，而不是單個元素（即使查詢的結果只有一個元素）。所以你試圖把一個事件監聽器附加到那個NodeList上，而不是一個元素上。

這不工作（注意[0]）（「頂部」）

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

來源

2017-02-14 04:35:28

......這是*完整的*原因，當你知道你只有一個元素可以使用時，爲什麼指南要使用querySelector。當然，OMG， – BoltClock

。我其實知道這一點，但錯過了它。總腦屁。我會尷尬地刪除這個問題，但其他人可能有一天會有同樣的大腦放屁。大聲笑 – AlwaysLearning

無法爲單個元素使用querySelectorAll？

回答

相關問題