在 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” 的相关文章

  • javascript:在 IE9 中获取输入字段(类型=文件)的 base64

    我需要上传一张图片 类似这样的
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • jqgrid 在编辑框中选择不正确的下拉选项值

    我正在使用表单编辑 表单中有两个选择框 一个选择框是国家 地区 另一个选择框是州 州选择框取决于所选的国家 地区 并将动态填充 例如 Country 美国 期权价值 1 英国 期权价值 2 美国的状态 阿拉巴马州 选项值 1 加利福尼亚州
  • 如何检测不渲染 .png 透明的浏览器

    我有这段代码可以根据一周中的某一天渲染图像 但在 IE6 及更低版本以及可能其他一些浏览器中 它不会呈现 png 不透明度 所以我想稍微改变一下 这样它就会检测到不渲染 alpha 透明度的浏览器 并告诉他们加载这个图像 img horar
  • 如何使用 AngularJS、Devise 和 UI Router 全局实现身份验证?

    我对 Angular 很陌生 所以这可能是一个新手问题 我正在尝试实现一个简单的任务管理器 只是一个练习 以 Rails 作为后端 以 Angular 作为前端 到目前为止 我遵循了教程 一切正常 现在我想在全球范围内实施身份验证 这意味着
  • 解释 javascript 中的奇怪行为

    我在推特上看到了这个 我也无法解释 定义一个onload函数按以下两种方式工作 1 JSFiddle http jsfiddle net 6rq9k 2 JSFiddle http jsfiddle net 6rq9k 1
  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 使用什么事件来在选择文本框中的值时显示警报消息

    我正在使用 jquery 的自动完成 api 来从数据库中获取名称 但是我想在从显示的文本框中选择名称时显示一条警报消息 我将显示一个图像以便更好地理解 当我输入 S 时 它将显示所有包含 S 的记录 所以问题是 如果我选择例如 Spars
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • jquery:如何检查div中的所有单选按钮是否被选中

    我的 html 看起来像这样 div div
  • Hydrate with RTK Query 确实会抛出错误

    我有一个非常简单的组件来显示来自本地 API 的数据 使用 Nextjs API 路由制作 我使用 RTK 查询来获取数据 const api createApi reducerPath data baseQuery fetchBaseQu
  • 测量填写部分的时间 - 谷歌表单

    我正在尝试使用谷歌表单进行研究调查问卷 对于某些部分 我想自动测量用户填写所需的时间 谷歌表单中没有这样的选项 我尝试复制表单源 并用 javascript 填充时间 但它不起作用 跨源问题 未能成功托管复制的表单 如何做到 我如何衡量回答
  • backbone.js:视图中影响集合中不同模型的按钮

    我刚刚开始使用backbone js 到目前为止 我真的很喜欢它 我有这样的事情 ModelA ModelB ViewA ViewB ModelA 持有 ModelB 的集合 如何使用按钮构建模型 B 的视图 单击该按钮会更改集合中下一个
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 如何将命名空间与 TypeScript 外部模块一起使用?

    我有一些代码 基本类型 ts export namespace Living Things export class Animal move export class Plant photosynthesize dog ts import
  • 通过ajax执行后期操作时如何克服CORS重定向问题?

    我可以通过外部登录表单中的 post 方法类型提交表单来登录 roundcube 实例 托管在另一台服务器上 我收到此错误 通过 ajax 签名时 XMLHttpRequest 无法加载https 192 168 0 7 mail http
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这

随机推荐

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

    我正在尝试开发一个反卷积层 或者准确地说是转置卷积层 在前向传递中 我进行了完全卷积 零填充卷积 在向后传递中 我进行有效的卷积 没有填充的卷积 以将错误传递到前一层 偏差的梯度很容易计算 只需对多余维度进行平均即可 问题是我不知道如何更新
  • 是否有一种 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