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的原型中有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

Javascript forEach方法适用于NodeList

1 个答案: