我想迭代一些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的结果是数组吗?如果不是，是什么?
当前回答
下面是我在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';
}
);
其他回答
编辑:尽管在新版本的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。
下面是我在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';
}
);
它不返回数组，而是返回节点列表。
getElementsByClassName的结果是数组吗?
No
如果不是，是什么?
与所有返回多个元素的DOM方法一样，它是一个NodeList，参见https://developer.mozilla.org/en/DOM/document.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
});
