为什么querySelectorAll、getElementsByClassName无法选中.hours类元素

• 三类DOM选择API的返回值规则本身和预期存在差异：
  • document.querySelector() 设计上就只返回命中选择器的第一个DOM元素，天然无法获取全部6个.hours元素，不属于功能失效
  • document.querySelectorAll() 返回静态NodeList类数组集合，不是单个DOM节点
  • document.getElementsByClassName() 返回实时更新的HTMLCollection类数组集合，也不是单个DOM节点
• 代码逻辑错误：直接给类数组集合hoursTime绑定onclick事件、修改集合的innerHTML属性，类数组集合本身没有DOM节点专属的事件、内容操作属性，所以点击逻辑完全不会触发。
• 额外排查点：如果JS代码放在HTML的<head>标签内、且没有做DOM加载完成监听，执行选择逻辑时页面还没渲染出对应的.hours元素，会拿到空集合，也会导致逻辑失效。

把批量获取到的元素集合遍历，给每个单独的.hours元素绑定事件即可：

// 等DOM完全加载后再执行逻辑，避免拿到空集合
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有.hours元素的静态集合
  const hoursTimeList = document.querySelectorAll('.hours');
  const lastTimeList = document.querySelectorAll('.last-time');

  // 遍历集合，给每个元素单独绑定点击事件
  hoursTimeList.forEach(item => {
    item.onclick = function() {
      // this指向当前触发点击的具体.hours元素
      this.innerHTML = "Clicked";
    }
  })
})

兼容提示：getElementsByClassName返回的HTMLCollection在低版本浏览器中没有内置forEach方法，需要先通过Array.from(集合名)转成真正的数组再遍历，优先用querySelectorAll返回的NodeList遍历兼容性更稳定。

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