使用.classList.add時發生錯誤

Question

我正在玩0123'，我的控制檯中出現了一些奇怪的錯誤。 Here's my demo

基本上，我有一個所有類的孩子的圖像數組，我正在做一個javascrpt .querySelectorAll將這些圖像存儲在變量進行進一步操作。

var el = document.querySelectorAll('.child'); 

console.log(el.classList;); 
el.classList.add("someClass"); 

但是當我打開我的控制檯時，我收到了一些錯誤。

這一個參考.classList; 未定義 這一個參考.classList.add();

Uncaught TypeError: Cannot read property 'add' of undefined 

然而，當我切換到查找由ID元素，錯誤消失。現在使用ID不是沒有問題的，但理想情況下，我想保留類名。任何想法發生了什麼？

Answer 1

el是一個集合，而不是一個DOM元素。儘管classList對數組沒有多大意義。所以你可能想要做什麼：

var product = document.getElementsByClassName('product'); 
var el = document.querySelectorAll('.child'); 
for(var i = 0; i < el.length; i++) { 
    el[i].classList.add("someClass"); 
    console.log(el[i].classList); 
}