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


当前回答

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

其他回答

for typescript,我更喜欢迭代

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

如前所述,getElementsByClassName返回一个HTMLCollection,它被定义为

[Exposed=Window]
interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

以前,一些浏览器会返回一个NodeList。

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

区别很重要,因为DOM4现在将nodelist定义为可迭代对象。

根据Web IDL草案,

实现声明为可迭代的接口的对象 支持迭代以获得值序列。 注意:在ECMAScript语言绑定中,接口为 iterable将有“entries”,“forEach”,“keys”,“values”和 接口原型对象上的@@iterator属性。

这意味着,如果你想使用forEach,你可以使用一个返回节点列表的DOM方法,比如querySelectorAll。

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

注意,这还没有得到广泛支持。另见Node.childNodes?

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

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

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

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

MDN: Document.querySelectorAll ()

这是更安全的方法:

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