我想迭代一些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,不要与NodeList混淆(NodeList有自己的forEach()方法)。
在ES2015中,一个简单的方法是将一个类数组对象转换为Array.prototype.forEach(),这个方法还没有提到,就是使用spread操作符或spread语法:
const elementsArray = document.getElementsByClassName('myclass');
[...elementsArray].forEach((element, index, array) => {
// do something
});
下面是我在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';
}
);
你可以使用array .from将集合转换为数组,这比array .prototype. foreach .call干净得多:
Array.from(document.getElementsByClassName("myclass")).forEach(
function(element, index, array) {
// do stuff
}
);
在不支持Array.from的旧浏览器中,您需要使用Babel之类的东西。
ES6还添加了以下语法:
[...document.getElementsByClassName("myclass")].forEach(
(element, index, array) => {
// do stuff
}
);
其余的解构…适用于所有类数组对象,而不仅仅是数组本身,然后使用良好的旧数组语法从值构造数组。
虽然替代函数querySelectorAll(这有点使getElementsByClassName过时)返回一个原生具有forEach的集合,但其他方法如map或filter都没有,所以这个语法仍然有用:
[...document.querySelectorAll(".myclass")].map(
(element, index, array) => {
// do stuff
}
);
[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);