在前端开发中，我们经常会使用 getElementsByClassName 方法来获取一个或多个元素。该方法返回的是一个类似数组的对象，它们可以被遍历和访问，很多人习惯使用 forEach 对这个对象进行操作。但是有时候当我们尝试使用 forEach 来迭代这个对象时，会遇到“TypeError: undefined is not a function” 的错误。
错误原因
这个错误产生的原因是因为 getElementsByClassName 返回的是一个类似数组的对象，而不是真正的数组。虽然这个对象具有类似于数组的结构，在大多数情况下可以像数组一样工作，但它并没有继承所有数组方法，包括 forEach。
因此，如果我们尝试在返回的对象上使用 forEach 方法，JavaScript 引擎会抛出一个类型错误，说 undefined 不是一种函数。
解决办法
有几种方法可以解决这个问题。
1. 将类似数组对象转换为真正的数组
我们可以使用 Array.from() 或者 Array.prototype.slice.call() 将类似数组的对象转换为真正的数组，然后再使用 forEach 方法。
const elements = document.getElementsByClassName('example');
const elementArr = Array.from(elements);
elementArr.forEach(elem => {
// ...
});2. 使用 for 循环遍历
我们可以使用一个简单的 for 循环来遍历返回的对象。
const elements = document.getElementsByClassName('example');
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
// ...
}3. 将 NodeList 转换为 Array
在一些较老的浏览器中，可能不支持 Array.from() 或者 Array.prototype.slice.call() 方法。这时候，我们可以使用 [].slice.call() 来将 NodeList 转换为数组。
const elements = document.getElementsByClassName('example');
const elementArr = [].slice.call(elements);
elementArr.forEach(elem => {
// ...
});总结
在使用 getElementsByClassName 方法获取元素时，需要知道它返回的是一个类似数组的对象，而不是真正的数组。如果您想对其执行某些函数，例如 forEach，则需要先将其转换为真正的数组或使用 for 循环进行遍历。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11640