在 getElementsByClassName 的数组上使用 forEach 会导致“TypeError: undefined is not a function”

2024-04-28

In 我的 JSFiddle http://jsfiddle.net/jer2/zcrh9/3/,我只是想迭代一个元素数组。正如日志语句所证明的那样,该数组非空。然而,呼叫forEach给了我(不太有帮助)“未捕获TypeError: undefined不是一个函数”错误。

我一定是做了什么蠢事;我究竟做错了什么?

My code:

var arr = document.getElementsByClassName('myClass');
console.log(arr);
console.log(arr[0]);
arr.forEach(function(v, i, a) {
  console.log(v);
});
.myClass {
  background-color: #FF0000;
}
<div class="myClass">Hello</div>

那是因为document.getElementsByClassName返回一个HTML集合 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection,不是数组。

幸运的是,这是一个“类数组”对象 https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th/chapter-7/array-like-objects(这解释了为什么它被记录为一个对象,以及为什么你可以使用标准迭代for循环),所以你可以这样做:

[].forEach.call(document.getElementsByClassName('myClass'), function(v,i,a) {

使用 ES6(在现代浏览器或 Babel 上),您还可以使用Array.from https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from它从类似数组的对象构建数组:

Array.from(document.getElementsByClassName('myClass')).forEach(v=>{

或将类似数组的对象展开到数组中:

[...document.getElementsByClassName('myClass'))].forEach(v=>{
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 getElementsByClassName 的数组上使用 forEach 会导致“TypeError: undefined is not a function” 的相关文章

随机推荐

  • 如何更新反卷积层的权重?

    我正在尝试开发一个反卷积层 或者准确地说是转置卷积层 在前向传递中 我进行了完全卷积 零填充卷积 在向后传递中 我进行有效的卷积 没有填充的卷积 以将错误传递到前一层 偏差的梯度很容易计算 只需对多余维度进行平均即可 问题是我不知道如何更新
  • 是否有一种 Java 数据结构实际上是具有双索引和内置插值的 ArrayList?

    我正在寻找具有以下特征的预构建 Java 数据结构 它应该看起来像 ArrayList 但应该允许通过双精度而不是整数进行索引 请注意 这意味着您可能会看到与原始数据点不相符的索引 即询问与键 1 5 对应的值 EDIT 为了清楚起见 根据
  • Android 分享 Facebook 意图 - 分享文本和链接

    我正在尝试使用 Android 共享意图在 Facebook 上发布内容 它看起来像这样 shareIntent setFlags Intent FLAG ACTIVITY NEW TASK shareIntent setType text
  • Amazon EC2 微型实例没有响应

    我有几个微型实例 几周以来一直运行良好 两者都运行 WordPress 博客 在过去 24 小时内 其中一个已经停止 即使重新启动后我也无法 ssh 登录 另一个实例工作正常 ssh connect to host ec2 xxx xxx
  • Codeigniter 活动记录选择、左连接、计数

    我有一个显示数据库查询结果的表单 这些结果可以有许多其他资产与之相连 我想找到一种方法来显示每个元素有多少资产 例如 我的表是英格兰地区 另一个表是用户居住的地方 我当前有这个代码 this gt db gt select this gt
  • WordPress 评论回复链接不出现

    我正在使用自定义代码来打印评论 但问题是无论我做什么 我都无法在任何评论下打印评论回复链接 这是代码
  • AWS IOT 连接超时异常

    AWSIoTPythonSDK exception AWSIoTExceptions connectTimeoutException 在我的机器上运行示例 python 代码后 我收到此异常 参考了github的例子 https githu
  • Visual Studio 2013 设计器尝试加载错误版本的项目 DLL

    我的解决方案中有一个 Visual Studio 项目 它引用同一解决方案中的类库项目 该项目编译并执行得很好 但是 当我尝试在设计器中打开一个表单时 我收到一条消息 无法加载文件或程序集 MyLibName Version 1 0 547
  • 获取标签包含 GROUP_CONCAT 字段的所有文章

    我有一张桌子articles 其他tags 第三个称为article tags 我想生成一个页面 其中列出特定标签的所有文章 我的查询如下所示 SELECT headline GROUP CONCAT tags tag name AS al
  • 在 Selenium 的特定位置打印网页

    我有这个代码可以转到 Google 并将页面转换为 PDF Program to go to Google and convert the page to a PDF But it saves in my downloads folder
  • 添加“通过电子邮件分享”链接到网站

    我有一个在 Dreamweaver CS4 中构建的 HMTL CSS 网站 我想添加一个指向该网站的 通过电子邮件共享 链接 这样任何点击它的人都可以轻松地将指向该网站的链接发送给他们选择的收件人 我想要其中一个信封图标 但最好可以自定义
  • 如何使用 NPAPI 将 Delphi VCL 表单嵌入到 HTML 页面中?

    使用 Delphi 编写 ActiveX 插件的方法有很多 但 ActiveX 本身在 IE 以外的浏览器中存在很多限制 所以我在想 如何编译一个 NPAPI 格式的插件 原生兼容 Chrome Firefox 该插件的目的是允许将 VCL
  • UnsupportedOperationException:尝试从与某个不关联的上下文获取显示

    我在实时应用程序上遇到 UnsupportedOperationException 崩溃 所有崩溃都与 Moto Android 11 设备相关 可以看到它和onKeyUp有某种关系 但仍然不知道如何重现或解决这个问题 任何帮助 将不胜感激
  • GitHub 操作 - 如何参数化容器映像主机名

    我有一个 GitHub 操作 其工作流程使用容器来运行它 并使用私有 docker 注册表 myhostname com 见下文 jobs myjob name My Job runs on some tag on runners cont
  • 格式化时间戳

    如何将 Rails 时间戳格式化为更易于理解的格式 如果我只是打印出来created at or updated at在我看来是这样的 然后我会得到 2009 03 27 23 53 38 世界标准时间 The strftime http
  • 如何在 MVC 3 Razor View Engine 中使用 C# 显示和隐藏 Div?

    我必须编写 C 代码来在 MVC3 中显示和隐藏 div 以用于基于 C 中的 switch case 的各种控件 如何在不使用 JQuery Show 或 hide 的情况下完成它 但在完全服务器端 将 switch 语句直接添加到 cs
  • Google Apps onEdit 事件 - event.source 未定义

    Google 文档允许编写脚本 当单元格内容与特定单词匹配时 我试图更改单元格的颜色 我的问题是 onEdit 函数没有按照此处指定的方式工作 https developers google com apps script guide ev
  • 未找到神奇函数“bash”

    我有一堆模拟想要在高性能集群上运行 我应该在这些集群上进行预留以获得计算时间 由于预订是有时间限制的 我正在开发一个自动化脚本 我可以scp进入集群并运行 然后 该脚本将下载相关的模拟文件 运行它们 并上传结果 该自动化脚本的一部分位于ba
  • 转义 C++ 字符串

    将 C std string 转换为另一个 std string 的最简单方法是什么 它转义了所有不可打印的字符 例如 对于两个字符的字符串 0x61 0x01 结果字符串可能是 a x01 或 a 01 看看Boost的字符串算法库 ht
  • 在 getElementsByClassName 的数组上使用 forEach 会导致“TypeError: undefined is not a function”

    In 我的 JSFiddle http jsfiddle net jer2 zcrh9 3 我只是想迭代一个元素数组 正如日志语句所证明的那样 该数组非空 然而 呼叫forEach给了我 不太有帮助 未捕获TypeError undefin