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


当前回答

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";
  }

}

其他回答

getElementsByClassName()的结果不是数组,而是一个类数组对象。具体来说,它被称为HTMLCollection,不要与NodeList混淆(NodeList有自己的forEach()方法)。

在ES2015中,一个简单的方法是将一个类数组对象转换为Array.prototype.forEach(),这个方法还没有提到,就是使用spread操作符或spread语法:

const elementsArray = document.getElementsByClassName('myclass');

[...elementsArray].forEach((element, index, array) => {
    // do something
});

编辑:尽管在新版本的HTML中返回类型发生了变化(参见Tim Down的更新答案),但下面的代码仍然可以工作。

正如其他人所说,它是一个NodeList。这里有一个完整的工作示例,你可以尝试一下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function findTheOddOnes()
            {
                var theOddOnes = document.getElementsByClassName("odd");
                for(var i=0; i<theOddOnes.length; i++)
                {
                    alert(theOddOnes[i].innerHTML);
                }
            }
        </script>
    </head>
    <body>
        <h1>getElementsByClassName Test</h1>
        <p class="odd">This is an odd para.</p>
        <p>This is an even para.</p>
        <p class="odd">This one is also odd.</p>
        <p>This one is not odd.</p>
        <form>
            <input type="button" value="Find the odd ones..." onclick="findTheOddOnes()">
        </form>
    </body>
</html>

这适用于IE 9, FF 5, Safari 5和Win 7上的Chrome 12。

如前所述,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
});

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";
  }

}