js如何循环HTMLCollection

场景

当使用document.getElementsByClassName方法获取一个包含DOM节点的集合arr时,正常的forEach和map操作都会报一个arr.map is not a function的错误

因为这里的arr并不是标准的 数组 (Array),而是一个 HTMLCollection

解决

  1. 使用document.querySelectorAll获取节点列表
  2. 转为数组
bash 复制代码
Array.from(arr).forEach(v => {
  v.childNodes[0].style.display = 'none';
});
  1. 扩展运算符
bash 复制代码
[...arr].forEach(v => {
  v.childNodes[0].style.display = 'none';
});
  1. 用传统 for 循环
bash 复制代码
for (let i = 0; i < arr.length; i++) {
  arr[i].childNodes[0].style.display = 'none';
}

拓展

  1. 这是一个右击出现弹窗的事件,每个节点都对应一个弹窗,可左键一键清空
bash 复制代码
handleRightClickPoint(index, e){
  e.preventDefault();
  let t = document.getElementsByClassName('hangdian-right')
  let totalnodes = t[index].childNodes
  totalnodes[0].style.display = 'block';
  totalnodes[0].style.left = (e.clientX + 18) + 'px';
  totalnodes[0].style.top = (e.clientY - 5) + 'px';
  totalnodes[0].onclick = function() {
    totalnodes[0].style.display = 'none';
  };
  document.onclick = function() {
    [...t].forEach(v=>{
      v.childNodes[0].style.display = 'none';
    })
  };
},
相关推荐
W.Buffer38 分钟前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
Mintopia2 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia2 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
皓月Code2 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
MoonBit月兔2 小时前
MoonBit Pearls Vol.12:初探 MoonBit 中的 JavaScript 交互
开发语言·javascript·数据库·交互·moonbit
非凡ghost2 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
www_stdio2 小时前
深入理解JavaScript变量声明:var、let与const的全面解析
javascript
San302 小时前
AI 歌词生成器:使用 OpenAI 打造你的专属作词助手
javascript·人工智能·node.js
用户84298142418102 小时前
JavaScript数据类型
javascript
非凡ghost3 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端