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';
    })
  };
},
相关推荐
liaojuajun42 分钟前
可视化地图
开发语言·javascript·ecmascript
小高0071 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
小*-^-*九6 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
gplitems1238 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡11 小时前
React Native 中的 useCallback
javascript·react native·react.js
谢尔登13 小时前
【Nest】基本概念
javascript·node.js·express
EveryPossible14 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫14 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
林烈涛15 小时前
js判断变量是数组还是对象
开发语言·前端·javascript