我想迭代一些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,它被定义为
[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?
getElementsByClassName()的结果不是数组,而是一个类数组对象。具体来说,它被称为HTMLCollection,不要与NodeList混淆(NodeList有自己的forEach()方法)。
在ES2015中,一个简单的方法是将一个类数组对象转换为Array.prototype.forEach(),这个方法还没有提到,就是使用spread操作符或spread语法:
const elementsArray = document.getElementsByClassName('myclass');
[...elementsArray].forEach((element, index, array) => {
// do something
});
使用这段代码将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,它被定义为
[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?