小编典典

JS:使用Array.forEach遍历getElementsByClassName的结果

javascript

我想遍历一些DOM元素,我正在这样做:

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

但我得到一个错误:

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

我使用的是Firefox 3,所以我知道这两个getElementsByClassNameArray.forEach都存在。这工作正常:

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

getElementsByClassName数组的结果吗?如果没有,那是什么?


阅读 923

收藏
2020-04-25

共1个答案

小编典典

不需要。如DOM4中所指定,它是一个HTMLCollection(至少在现代浏览器中。较旧的浏览器返回NodeList)。

在所有现代浏览器(几乎所有其他IE<=8)中,您都可以调用Array的forEach方法,并将其元素列表(为HTMLCollectionorNodeList)作为this值传递给它:

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

如果您可以使用ES6感到满意(例如,您可以放心地忽略InternetExplorer或使用ES5编译器),则可以使用Array.from

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});
2020-04-25