JS使用getElementsByTagName获取button数组长度小于实际值问题

getElementsByTagName 返回的是实时HTML集合，你遇到的长度不符问题核心是JS执行时机早于DOM加载完成：浏览器解析HTML是从上到下逐行执行的，如果你的JS代码放在还未完全解析的button元素之前，执行查询时只能拿到已经加载完成的前4个button，剩余button还没被渲染到DOM树中，因此无法被查询到。

方案1：调整JS代码放置位置 #

把所有JS代码放到HTML文件</body>结束标签之前，保证所有DOM元素都解析完成后再执行JS逻辑，就能获取到全部button元素。

方案2：监听DOM加载完成事件 #

将业务逻辑包裹在DOMContentLoaded事件回调中，确保DOM树完全构建后再执行元素查询：

document.addEventListener('DOMContentLoaded', function () {
  // 推荐使用querySelectorAll，返回静态NodeList，不会随DOM变化实时更新
  const all_buttons = document.querySelectorAll('button');
  let copyAllButtons = [];

  for (let i = 0; i < all_buttons.length; i++) {
    copyAllButtons.push(all_buttons[i].classList[1]);
  }

  console.log(copyAllButtons);
})

如果偏好更简洁的写法，也可以用数组方法直接遍历：

document.addEventListener('DOMContentLoaded', function () {
  const copyAllButtons = Array.from(document.querySelectorAll('button'))
    .map(btn => btn.classList[1])
  console.log(copyAllButtons)
})

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