使用document.getElementsByClassName获取元素后遍历HTMLCollection为空

核心原因 #

你遇到的问题本质是代码执行时机过早——DOM中目标元素还没加载完成，你的JS就已经执行了，所以获取到的是空集合。

解决方案 #

1. 把脚本放在HTML末尾 #

将你的JS代码放在</body>标签之前，确保DOM完全加载后再执行：

<body>
  <!-- 页面内容 -->
  <script>
    var videos = document.getElementsByClassName("ytd-thumbnail-overlay-time-status-renderer")
    console.log(videos)
    videos = Array.from(videos)
    console.log(videos)
  </script>
</body>

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

如果脚本必须放在页面头部，使用DOMContentLoaded事件确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  var videos = document.getElementsByClassName("ytd-thumbnail-overlay-time-status-renderer")
  console.log(videos)
  videos = Array.from(videos)
  console.log(videos)
});

3. 使用querySelectorAll替代（可选） #

querySelectorAll返回静态NodeList，不受DOM变化影响，转数组也更方便：

document.addEventListener('DOMContentLoaded', function() {
  var videos = document.querySelectorAll(".ytd-thumbnail-overlay-time-status-renderer")
  console.log(videos)
  videos = Array.from(videos) // 或直接用 [...videos] 展开为数组
  console.log(videos)
});

额外说明 #

getElementsByClassName返回的是动态HTMLCollection，如果DOM后续加载了目标元素，集合会自动更新，但前提是代码执行时DOM已经开始加载目标元素。如果页面是动态渲染（比如YouTube的内容是异步加载的），可能还需要等待异步内容加载完成，这时可以使用setInterval轮询或者监听页面的load事件。

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