使用for-in遍历DOM元素集合报错？AddEventListener无法调用

这是个很经典的JavaScript坑，我当初刚接触DOM操作的时候也踩过！核心原因在于for-in循环的设计目的根本不是用来遍历数组或类数组对象的元素，它的作用是遍历对象的所有可枚举属性。

咱们来拆解下问题：

• 你用document.getElementsByTagName()、document.querySelectorAll()这类方法得到的DOM元素集合，本质是类数组对象（比如HTMLCollection或NodeList），它们虽然长得像数组（有length属性，能通过索引访问元素），但本质还是对象。
• 这类对象除了存储DOM元素的索引属性（比如0、1、2），还自带了很多额外的可枚举属性，比如length、item()，甚至有些浏览器会添加自己的扩展属性。
• 当你用for (var element in someDOMelements)时，循环变量element拿到的是这些属性的名称字符串（比如"0"、"1"、"length"、"item"），而不是DOM元素本身！当循环到"length"这类属性时，你试图调用element.addEventListener()，相当于给一个字符串调用DOM方法，自然会抛出错误。

而普通的for (var i = 0; i < someDOMelements.length; i++)循环是通过索引访问元素：someDOMelements[i]会直接拿到对应位置的DOM元素，所以调用addEventListener()完全没问题。

另外，现在还有更优雅的遍历方式：

• 用for...of循环（现代浏览器都支持），它可以直接遍历类数组集合的元素：

  for (const element of someDOMelements) {
    element.addEventListener('click', handler);
  }
  

• 或者把类数组转成真正的数组再用forEach：

  Array.from(someDOMelements).forEach(element => {
    element.addEventListener('click', handler);
  });
  

内容的提问来源于stack exchange，提问作者Cerbion