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