使用Array.forEach迭代getElementsByClassName的结果

我想迭代一些DOM元素，我这样做:

document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
  //do stuff
});

但是我得到了一个错误:

document.getElementsByClassName(“myclass”)。forEach不是一个函数

我使用Firefox 3，所以我知道getElementsByClassName和Array。每个人都在场。这很好:

[2, 5, 9].forEach( function(element, index, array) {
  //do stuff
});

getElementsByClassName的结果是数组吗?如果不是，是什么?

当前回答

或者你可以使用querySelectorAll返回NodeList:

document.querySelectorAll('.myclass').forEach(...)

现代浏览器(包括Edge，但不包括IE)支持: 我可以使用querySelectorAll吗 NodeList.prototype.forEach ()

MDN: Document.querySelectorAll ()

其他回答

for typescript，我更喜欢迭代

for(let element of Array.from(document.querySelectorAll('.myclass'))){
   //my code
}

或者你可以使用querySelectorAll返回NodeList:

document.querySelectorAll('.myclass').forEach(...)

现代浏览器(包括Edge，但不包括IE)支持: 我可以使用querySelectorAll吗 NodeList.prototype.forEach ()

MDN: Document.querySelectorAll ()

它不返回数组，而是返回节点列表。

getElementsByClassName()的结果不是数组，而是一个类数组对象。具体来说，它被称为HTMLCollection，不要与NodeList混淆(NodeList有自己的forEach()方法)。

在ES2015中，一个简单的方法是将一个类数组对象转换为Array.prototype.forEach()，这个方法还没有提到，就是使用spread操作符或spread语法:

const elementsArray = document.getElementsByClassName('myclass');

[...elementsArray].forEach((element, index, array) => {
    // do something
});

getElementsByClassName的结果是数组吗?

如果不是，是什么?

与所有返回多个元素的DOM方法一样，它是一个NodeList，参见https://developer.mozilla.org/en/DOM/document.getElementsByClassName

推荐文章