Javascript forEach 方法适用于 NodeList

Question

我正在学习 DOM 操作，我注意到当我使用 document.querySelectorAll 创建 NodeList 时，我可以使用 ForEach 循环。那应该是不可能的。为什么它有效？它只适用于数组。

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");
    });
})

Answer 1

这取决于浏览器，它在 chrome 中支持，但在其他浏览器中不支持。 NodeList 在其 chrome 原型(prototype)中有 forEach，但在其他浏览器中没有。

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

在所有浏览器中遍历 NodeList:

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