Javascript forEach方法正在爲NodeList工作

我正在學習DOM操作，並且我注意到當我通過使用document.querySelectorAll創建NodeList時，我能夠使用ForEach循環。這應該是不可能的。它爲什麼有效？它只是假設在陣列上工作。Javascript forEach方法正在爲NodeList工作

var items = document.querySelectorAll("li"); 
console.log(items); 

items.forEach(function(item){ 
    item.addEventListener("click", function(){ 
     item.classList.toggle("finished"); 
    }); 
    item.addEventListener("mouseover", function(){ 
     item.classList.add("over"); 
    }, false); 
    item.addEventListener("mouseleave", function(){ 
     item.classList.remove("over"); 
    }); 
})

來源

2016-08-31 Chrismar

似乎可以在Chrome瀏覽器中使用，但不適用於Firefox。所以它似乎是非標準的瀏覽器行爲。編輯：不存在邊緣，無論是 – vlaz

這取決於瀏覽器，它在chrome中支持，但在其他瀏覽器中不支持。 NodeList在chrome中的forEach原型中，它不在其他瀏覽器中。

// to check for forEach support 
if(NodeList.prototype.forEach) /*...*/

遍歷節點列表中的所有瀏覽器：

for (var i = 0, l=myNodeList.length; i < l; ++i) { 
    var item = myNodeList[i]; 
}

，或者你可以簡單地把它轉換成一個數組：

var div_list = document.querySelectorAll('div'); // returns NodeList 
var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array

你可以閱讀更多的細節在這裏：https://developer.mozilla.org/en/docs/Web/API/NodeList

來源

2016-08-31 23:57:04 Bamieh

Javascript forEach方法正在爲NodeList工作

回答

相關問題