我想迭代一些DOM元素，我正在这样做：
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
但是我遇到了一个错误：
document.getElementsByClassName("myclass").forEach 不是一个函数
我正在使用 Firefox 3，所以我知道 getElementsByClassName 和 Array.forEach 都存在。下面的代码可以正常工作：
[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（即您可以安全地忽略Internet Explorer或者您正在使用ES5转换器），您可以使用Array.from：
Array.from(els).forEach((el) => {
// Do stuff here
console.log(el.tagName);
});
您可以使用Array.from将集合转换为数组，这比Array.prototype.forEach.call更加简洁:
您可以使用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
}
);
使用...进行Rest解构可以用于所有类似数组的对象，而不仅仅是数组本身，然后使用传统的数组语法从这些值中构造一个数组。
虽然替代函数querySelectorAll（有点让getElementsByClassName过时）返回一个集合，该集合本身具有forEach，但其他方法，如map或filter缺失，因此这种语法仍然很有用：
[...document.querySelectorAll(".myclass")].map(
(element, index, array) => {
// do stuff
}
);
[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);
或者您可以使用querySelectorAll，它返回 NodeList：
document.querySelectorAll('.myclass').forEach(...)
现代浏览器（包括Edge，但不包括IE）支持：
Can I use querySelectorAll
NodeList.prototype.forEach()
getElementsByClassName 在现代浏览器中返回 HTMLCollection。
它是一种类似于 arguments 的类数组对象，可以通过 for...of 循环进行迭代，以下是 MDN 文档的说明：
for...of 语句会创建一个循环用于迭代可迭代对象，包括：内置的 String、Array、类数组对象（例如 arguments 或 NodeList）、TypedArray、Map、Set 和用户自定义的可迭代对象。它调用一个自定义的迭代钩子，并为对象的每个不同属性的值执行语句。
Javascript 示例
for (const element of document.getElementsByClassName("classname")){
element.style.display="none";
}
Typescript 示例
let elements = document.getElementsByClassName('classname');
let i;
for (i = 0; i < elements.length; i++) {
if (elements[i] instanceof HTMLElement) {
elements[i].style.display = "none";
}
}
错误 TS2488: 类型 'HTMLCollectionOf<Element>' 必须有一个 '[Symbol.iterator]()' 方法，该方法返回一个迭代器。 - Turtles Are CuteHTMLCollection 存入变量中并声明其类型为 any，这样它就能像在 JavaScript 中一样工作。 - Haritsinh GohilgetElementsByClassName() 的结果不是数组，而是一个类数组对象。具体来说，它被称为 HTMLCollection，不要与 NodeList 混淆（其拥有自己的 forEach() 方法）。Array.prototype.forEach() 的数组的一种简单方法是使用扩展运算符或 扩展语法。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>
这在Win 7上的IE 9、FF 5、Safari 5和Chrome 12中有效。
对于TypeScript，我更喜欢使用 for 循环进行迭代。
for(let element of Array.from(document.querySelectorAll('.myclass'))){
//my code
}
如前所述，getElementsByClassName返回一个被定义为HTMLCollection的对象。
[Exposed=Window]
interface <i>HTMLCollection</i> {
readonly attribute unsigned long <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#dom-htmlcollection-length">length</a>;
getter <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#element">Element</a>? <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#dom-htmlcollection-item">item</a>(unsigned long <i>index</i>);
getter <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#element">Element</a>? <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#dom-htmlcollection-nameditem">namedItem</a>(DOMString <i>name</i>);
};[Exposed=Window]
interface <i>NodeList</i> {
getter <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#node">Node</a>? <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#dom-nodelist-item">item</a>(unsigned long <i>index</i>);
readonly attribute unsigned long <a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#dom-nodelist-length">length</a>;
iterable<<a rel="nofollow noreferrer" href="https://www.w3.org/TR/dom/#node">Node</a>>;
};这意味着，如果您想使用实现声明为可迭代的接口的对象 支持被迭代以获取一系列值。
注意：在ECMAScript语言绑定中，一个可迭代的接口将具有“entries”、“forEach”、“keys”、“values”和 @@iterator属性在其接口原型对象上。
forEach ，则可以使用返回 NodeList 的DOM方法，例如querySelectorAll 。
document.querySelectorAll(".myclass").forEach(function(element, index, array) {
// do stuff
});
请注意，这还没有被广泛支持。另请参见Node.childNodes的forEach方法?
forEach不是一个函数。 - Vitaly Zdanevichvar elements = document.getElementsByClassName("myclass");
for (var i = 0; i < elements.length; i++) myFunction(elements[i]);
getElementsByClassName的结果是一个数组吗？
不是。
那么它是什么？
和所有返回多个元素的DOM方法一样，它是一个NodeList，详见https://developer.mozilla.org/en/DOM/document.getElementsByClassName
[].forEach.call(elsArray, function () {...})。 - Kijewskidocument.getElementsByClassName()应该返回一个HTMLCollection（与 NodeList 非常相似但不是同一种类型）。感谢指出错误。 - Tim DownHTMLCollection提示。现在我终于可以在我的代码中使用HTMLCollection.prototype.forEach = Array.prototype.forEach;了。 - Maksim Vi.