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


当前回答

不,它不是数组。正如DOM4中指定的那样,它是一个HTMLCollection(至少在现代浏览器中是这样)。旧的浏览器返回一个NodeList)。

在所有现代浏览器(几乎所有其他IE <= 8)中,你可以调用Array的forEach方法,将元素列表(无论是HTMLCollection还是NodeList)作为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(即你可以安全地忽略ie或你正在使用ES5转译器),你可以使用Array.from:

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

其他回答

getElementsByClassName在现代浏览器中返回HTMLCollection。

这是 类似数组的对象,类似于参数,可通过for…查看下面MDN文档是怎么说的:

为…语句Of创建了一个遍历可迭代对象的循环, 包括:内置字符串,数组,数组类对象(例如,参数 或NodeList), TypedArray, Map, Set和用户定义的迭代对象。它 类要执行的语句调用自定义迭代钩子 对象的每个不同属性的值。

Javascript的例子

for (const element of document.getElementsByClassName("classname")){
   element.style.display="none";
}

打印稿的例子

let elements = document.getElementsByClassName('classname');
let i;

for (i = 0; i < elements.length; i++) {

  if (elements[i] instanceof HTMLElement) {
    elements[i].style.display = "none";
  }

}

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

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

getElementsByClassName的结果是数组吗?

No

如果不是,是什么?

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

这是更安全的方法:

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