JS滚动函数使用ID选择器生效但class选择器无效的原因

两种获取元素方法的返回值类型完全不同：

• getElementById返回匹配到的单个DOM元素，元素本身自带classListAPI，直接调用类名操作方法可以正常生效
• getElementsByClassName返回的是实时更新的HTMLCollection类数组集合，querySelectorAll返回的是静态NodeList类数组集合，这两种集合本身是多个元素的容器，没有classList属性，直接对集合调用类名操作方法自然会失效。

简单说就是你拿到的是一整组元素的打包结果，没有挨个给每个元素执行加/删类名的操作，逻辑当然跑不通。

遍历拿到的元素集合，给集合内的每一个DOM元素单独执行类名操作即可：

// 获取所有带navTabs类名的目标元素
const tabs = document.querySelectorAll(".navTabs");

const scrollFunc = function() {
  const y = window.scrollY;
  // 遍历每个元素单独操作类名
  tabs.forEach(tab => {
    if (y >= 10) {
      tab.classList.add("scrollNav");
    } else {
      tab.classList.remove("scrollNav");
    }
  })
};

window.addEventListener("scroll", scrollFunc);

如果需要兼容不支持NodeList.prototype.forEach的老旧浏览器，可以先把类数组集合转为普通数组再遍历：

// 用getElementsByClassName配合Array.from转数组
const tabs = Array.from(document.getElementsByClassName("navTabs"));

后续遍历逻辑和上面的写法完全一致。

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