document.getElementsByClassName()返回对象无法遍历：length显示0但有元素

核心原因 #

document.getElementsByClassName()返回的是动态HTMLCollection，它会实时同步DOM的变化。而浏览器控制台的console.log()是惰性求值的：当你打印这个集合时，控制台不会立刻读取它的内容，只有当你手动展开它的时候才会去DOM中查询当前状态的元素——这时候DOM可能已经加载完成，所以能看到3个元素；但你的代码执行到elements.length或遍历逻辑时，目标DOM元素还没被渲染出来，因此返回0、遍历无输出。

绝大多数情况是你的JS代码在DOM元素未加载完成时就执行了（比如脚本放在<head>标签内，没有等待DOM就绪）。

解决方案 #

1. 调整脚本位置 #

把JS代码放在</body>闭合标签的上方，确保页面DOM先渲染完成，再执行元素查询逻辑：

<body>
  <!-- 页面内容，包含所有.brute-force-effect元素 -->
  
  <script>
    const elements = document.getElementsByClassName("brute-force-effect");
    console.log(elements.length); // 正确返回3
    // 遍历元素
    for (let i = 0; i < elements.length; i++) {
      console.log(elements[i]);
    }
  </script>
</body>

2. 监听DOM加载完成事件 #

通过DOMContentLoaded事件，确保在DOM完全渲染后再执行元素操作：

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.getElementsByClassName("brute-force-effect");
  console.log(elements.length); // 3
  
  // 使用for...of遍历
  for (const e of elements) {
    console.log(e);
  }
});

3. 使用静态集合替代 #

改用document.querySelectorAll()，它返回的是静态NodeList，会保存查询时的DOM状态，不会随后续DOM变化动态更新：

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll(".brute-force-effect");
  console.log(elements.length); // 3
  
  // 遍历方式：for...of / for循环 / forEach
  elements.forEach(e => console.log(e));
});

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