我想迭代一些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的结果是数组吗?如果不是,是什么?


当前回答

下面是我在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';
    }
);

其他回答

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

使用这段代码将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
});

这是更安全的方法:

var elements = document.getElementsByClassName("myclass");
for (var i = 0; i < elements.length; i++) myFunction(elements[i]);

getElementsByClassName的结果是数组吗?

No

如果不是,是什么?

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

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

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

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

MDN: Document.querySelectorAll ()