如何迭代HTMLCollection？获取node-item元素后无法遍历的技术问询

嘿，我之前也碰到过一模一样的问题！你获取到的HTMLCollection虽然看起来像数组，但它本质是动态的类数组对象，而且在某些环境（比如TypeScript或者旧版浏览器）里可能没实现迭代器接口，再加上如果代码执行时机不对，就会出现“打印长度有值但迭代无输出”的情况。下面给你几个可行的解决方案：

先确认DOM加载时机 #

大概率你遇到的问题是代码执行时DOM还没完全加载完成——虽然打印nodeItems.length是4，但可能是浏览器的动态DOM收集机制导致的，实际元素还没挂载到页面上，迭代自然没输出。先把代码放到DOM加载完成的回调里：

document.addEventListener('DOMContentLoaded', () => {
  let nodeItems = document.getElementsByClassName('node-item');
  console.log('当前元素数量:', nodeItems.length); // 确保这里确实是4
  // 后续迭代代码放这里
});

正确的迭代方式 #

1. 用ES6的Array.from()转成数组（最可靠） #

Array.from()专门用来把类数组对象或可迭代对象转成真正的数组，兼容性也很好：

let nodeItems = document.getElementsByClassName('node-item');
let nodeArray = Array.from(nodeItems);
// 用for...of迭代
for (const item of nodeArray) {
  console.log(item);
}
// 或者用forEach
nodeArray.forEach(item => console.log(item));

2. 用扩展运算符转数组 #

同样是ES6的方法，语法更简洁：

let nodeItems = document.getElementsByClassName('node-item');
let nodeArray = [...nodeItems];
nodeArray.forEach(item => console.log(item));

3. 传统for循环（兼容性最好） #

如果你的环境不支持ES6，直接用索引遍历就不会有问题，因为HTMLCollection支持通过索引访问元素：

let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
  console.log(nodeItems[i]);
}

4. TypeScript环境下的处理 #

不用<any>断言，直接用类型断言配合Array.from更规范：

document.addEventListener('DOMContentLoaded', () => {
  const nodeItems = document.getElementsByClassName('node-item') as HTMLCollectionOf<HTMLElement>;
  const nodeArray = Array.from(nodeItems);
  for (const item of nodeArray) {
    console.log(item);
  }
});

为什么你之前的尝试没效果？ #

• 第一种尝试用[].slice.call()在某些严格模式或特殊环境下，可能因为HTMLCollection的原型链和数组不同导致转数组失败；
• 第二种尝试用<any>断言后，for...of没输出大概率还是DOM加载时机的问题，或者环境不支持HTMLCollection的迭代器；
• 另外，第一种尝试里用了var g，var的变量提升可能会导致意外的作用域问题，建议换成let或const。

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