使用Array.forEach迭代getElementsByClassName的结果

Question

使用Array.forEach迭代getElementsByClassName的结果

417

我想迭代一些DOM元素，我正在这样做：

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

但是我遇到了一个错误：

document.getElementsByClassName("myclass").forEach 不是一个函数

我正在使用 Firefox 3，所以我知道 getElementsByClassName 和 Array.forEach 都存在。下面的代码可以正常工作：

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

getElementsByClassName的结果是否为数组？如果不是，那它是什么？

- Steve Claridge

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Konstantin · Answer 1

最简单的解决方案：

Object.assign(HTMLCollection.prototype, {
  forEach(event) {
    Array.prototype.forEach.call(this, (element) => event(element));
  },
});

之后你可以这样写：

document
  .getElementsByClassName("disable")
  .forEach((element) => alert(element.classList[0]));

- Андрей · Answer 2

使用以下代码将forEach方法添加到HTMLCollection中：

/**
 *
 * @type {Function}
 */
HTMLCollection.prototype.forEach = HTMLCollection.prototype.forEach ||
    function (callBack) {
        for (let i = 0; i < this.length; i++) {
            callBack(this[i])
        }
    };

那么你的代码将会正常运行：

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

- StefanSL · Answer 3

这是我在jsperf上创建的一个测试： https://jsperf.com/vanillajs-loop-through-elements-of-class

在Chrome和Firefox中性能最好的版本是使用for循环与document.getElementsByClassName相结合的传统方法：

var elements = document.getElementsByClassName('testClass'), elLength = elements.length;
for (var i = 0; i < elLength; i++) {
    elements.item(i).textContent = 'Tested';
};

在Safari中，这个变量是获胜者：

var elements = document.querySelectorAll('.testClass');
elements.forEach((element) => {
    element.textContent = 'Tested';
});

如果您想要最佳表现的跨浏览器选项，可能是这样的：

var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
    (element) => {
        return element.textContent = 'Tested';
    }
);

- reko_t · Answer 4

它不会返回一个Array，而是返回一个NodeList。