getElementsByClassName使用forEach报错解决及原因

getElementsByClassName使用forEach会报错。

阿西,记性不好真是头疼,Array.prototype.forEach.call(els, function(el) {}就这一行代码总是记不住……

每次遇到这个问题都得百度,索性做个笔记水一水。

这行代码抄袭来源:https://www.it1352.com/769506.html

原文截取如下:

JS:使用Array.forEach遍历getElementsByClassName的结果(JS: iterating over result of getElementsByClassName using Array.forEach)

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) {...});

为了不只是搬运工,小编整理之余稍稍解释下原因。

使用如下代码:

let els = document.getElementsByClassName('line-item')
console.log(els)

然后来控制台一观,内容如下:

HTMLCollection(3) [div#xx.line-item, div#cc.line-item, div#vv.line-item, xx: div#xx.line-item, cc: div#cc.line-item, vv: div#vv.line-item]
length: 3
0: div#xx.line-item
align: ""
title: ""
lang: ""
translate: true
dir: ""
hidden: false
accessKey: ""
draggable: false
spellcheck: true
autocapitalize: ""
contentEditable: "inherit"
isContentEditable: false
inputMode: ""
offsetParent: body
offsetTop: 480
offsetLeft: 90
offsetWidth: 613

原来如此,使用getElementsByClassName获取到的这玩意他不是个数组,是个HTMLCollection

HTMLCollection 这玩意又是啥呢?

我们看看w3school文档内容:

HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。

HTML DOM 中的 HTMLCollection 是“活”的;如果基本的文档改变时,那些改变通过所有 HTMLCollection 对象会立即显示出来。

下面的每个项目(以及它们指定的属性)都返回 HTMLCollection:

  • Document (images, applets, links, forms, anchors)
  • form (elements)
  • map (areas)
  • select (options)
  • table (rows, tBodies)
  • tableSection (rows)
  • row (cells)

HTMLDocument 接口的许多属性都是 HTMLCollection 对象,它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements 和 select.options 都是 HTMLCollection 对象。HTMLCollection 还提供了遍历 Table 的各行以及 TableRow 的各个单元格的一种方便方法。

在上面已经提到了,HTMLCollection 对象是带有方法的 HTML 元素的集合,用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。在 JavaScript 中,HTMLCollection 对象的行为和只读数组一样,可以使用 JavaScript 的方括号,通过编号或名称索引一个 HTMLCollection 对象,而不必调用 item() 方法和 namedItem() 方法。

HTMLCollection 对象是只读的,不能给它添加新元素,即使采用 JavaScript 数组语法也是如此。

HTMLCollection 对象和 NodeList 对象很相似,但前者可能既能用名称索引也能用数字索引。

看过w3c文档,发现这玩意更像个对象,所以不能直接用forEach,得适当做个转化。

版权声明

FindFor


首发 FindFor,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读
智慧城管系统详细设计方案
# 智慧城管系统详细设计方案 ## 一、系统架构设计 ### (一)整体架构 本系统采用前后端分离的微服务架构,前端基于Vue.js构建用户界面,后端使用ThinkPHP8开发API服务。通过微服务架构,将系统拆分为多个独立的服务模块,各模块可独立开发、部署和扩展,提高了系统的可维护性和扩展性。 ### (二)技术栈选择 1. **前端技术栈** - **Vue.js**:作为前端框架,
128

libnfc安装配置(Linux)
## 1、安装依赖库 ```shell sudo apt-get install libusb-dev libpcsclite-dev libusb libpcsclite1 libccid pcscd ``` ## 2、下载libnfc 选择一个libnfc存放路径,执行git命令下载libnfc ```shell git clone https://github.com/nfc-tools/l
301

dirsearch简单使用
` dirsearch`是一个用于在Web服务器上枚举目录和文件的工具,支持多线程,具有一些启发式算法,能够识别隐藏目录。以下是使用`dirsearch`的一些基本步骤: 1. **安装dirsearch**: 首先,确保你的系统上已经安装了Python。然后,可以通过以下方式安装`dirsearch`: `git clone https://gi
60

dirb使用
`dirb`(Directory Buster)是一个用于在Web服务器上枚举目录和文件的工具。它通过发送HTTP请求并分析响应来探测目标主机上存在的目录和文件。`dirb`的主要目的是帮助安全测试人员和黑客发现目标网站上隐藏的目录,这些目录可能包含敏感信息或安全漏洞。 以下是一些`dirb`工具的基本用法和参数: 1. **基本用法**: `dirb http://targ
86

ubuntu20.04.4安装golang语言
## 1、官网下载安装包 Go下载 - Go语言中文网 - Golang中文社区 https://studygolang.com/dl ## 2、将下载下来的安装包解压到env路径下 ``` tar xf go1.18.linux-amd64.tar.gz ``` ## 3、添加环境变量 通过将Go目录的位置添加到$PATH环境变量中,系统将知道在何处可以找到Go可执行二进制文件。 ``` vim
129

升级 Linux 服务器上的 TLS 版本至 1.2 或更高版本
## 1、检查当前 TLS 版本: 首先,您需要确认当前服务器上所使用的 TLS 版本。您可以通过运行以下命令来检查 OpenSSL 版本和支持的 TLS 版本: ```shell openssl version openssl ciphers -v ``` 如果您的 OpenSSL 版本较旧,可能需要升级 OpenSSL 以支持更高的 TLS 版本。升级 OpenSSL 的具体步骤取决于您所使用
85

茶馆注册商标需要注册哪几个类别?
茶馆注册商标需要综合考虑多个方面,以下是详细介绍: ### 商标查询与评估 在进行茶馆商标注册之前,首先需要进行商标查询与评估,以确定所申请商标是否已经被他人注册或使用,避免侵权纠纷。可以通过中国国家知识产权局商标局的官方网站进行查询。 ### 明确商标注册类别 - **核心类别** - **第30类**:主要包括咖啡、茶、可可和咖啡代用品;米;食用淀粉和西米;面粉和谷类制品;面包、糕
179

咖啡馆注册商标应该注册哪几类?咖啡馆还有配套的公众号和小程序,商标是否需要追加类型?
## 咖啡馆注册商标应该注册哪几类? 咖啡馆注册商标时,需要综合考虑核心业务、相关产品及未来发展可能涉及的领域,以下为你详细介绍需要重点关注的商标类别: ### 核心经营服务类 - **第43类**:提供食物和饮料服务;临时住宿。 - **重要子类别**: - 4301 组包含咖啡馆、餐厅、自助餐厅、快餐馆等服务。咖啡馆日常经营提供饮品、餐食等服务,此类别是必须注册的核心
490

[保姆级] Vue3 开发文档
#### 获取 this `Vue2` 中每个组件里使用 this 都指向当前组件实例,this 上还包含了全局挂载的东西、路由、状态管理等啥啥都有 而 Vue3 中没有 this,如果想要类似的用法,有两种,一是获取当前组件实例,二是获取全局实例,如下自己可以去打印出来看看 ```vue import { getCurrentInstance } from 'vue' // proxy
281

【转载】树莓派时间同步方法,来自博客园
树莓派系统时间不对在《初识树莓派》一文最后一张截图中其实隐藏了一个我没有太在意的时间问题,今天在开发树莓派监控程序的时候才发现。从图中我们可以知道上次登录时间是1970年1月1日星期四的00:03:17分,由此我们可以推断,新安装系统的树莓派默认系统时间应该是1970年1月1日开始的。很明显,这个时间与我们期望的当前时间是不符的。我们需要将系统时间修改为和当前时间同步。第一步:启用网络时间协议为了
391

Web前端开发众包资源共享,探索者联盟兼职开发者招募
# 项目情况 联盟接到合作伙伴的开发需求,有一系列的APP要开发。有很多个APP哦。 ## 需求描述 1. 参考指定APP,基于H5+Vue开发页面。 2. APP并不复杂,无需使用脚手架,cdn引入开发即可。 ## 交付要求 1. 源码交付 2. 代码风格良好,可顺利二次开发 3. 只要满足代码质量要求,能正常走通业务逻辑即可,无严格的APP测试步骤。 ## 预算 具体预算看APP复杂度。目前普
645

探索互联网新机遇,加入精英社群,共创辉煌职业篇章!
【探索互联网新机遇,加入精英社群,共创未来!】 在这个日新月异的互联网时代,每一处都蕴藏着无限可能与创新机遇。我们诚邀您成为“探索者联盟”的一员,与我们一起深度剖析市场动态,精准把握行业趋势,共同开启一段激动人心的职业旅程! 加入我们,您将享受到: - **市场分析**:深度解读互联网行业最新动态,洞悉市场先机。 - **职业规划**:一对一专业指导,定制个性化职业发展路径,助力您步步高升。
363