如何用JavaScript选中多个CSS类元素？querySelectorAll无法生效

你代码里存在两个核心问题：

1. document.querySelector的参数写法错误——它仅接受单个选择器字符串，多选择器需要用逗号分隔在同一字符串内，比如'.icon-bar.bar-top, .icon-bar.bar-middle, .icon-bar.bar-bottom'
2. document.querySelectorAll返回的是NodeList类数组对象，无法直接调用classList.add/remove，必须遍历每个元素执行操作

以下是修正后的完整代码：

// 选中所有三个图标栏元素
const heroIconBars = document.querySelectorAll('.icon-bar.bar-top, .icon-bar.bar-middle, .icon-bar.bar-bottom');

window.addEventListener('scroll', () => {
  const isScrolled = window.scrollY >= 46;
  
  // 遍历每个图标栏，添加或移除目标类
  heroIconBars.forEach(bar => {
    if (isScrolled) {
      bar.classList.add('hero-icon-bar-scroll');
    } else {
      bar.classList.remove('hero-icon-bar-scroll');
    }
  });
});

简化优化（可选） #

如果这三个图标栏是页面中仅有的.icon-bar元素，你可以把选择器简化为'.icon-bar'，再用classList.toggle的第二个参数进一步精简代码：

const heroIconBars = document.querySelectorAll('.icon-bar');

window.addEventListener('scroll', () => {
  const isScrolled = window.scrollY >= 46;
  heroIconBars.forEach(bar => {
    // 第二个参数控制类的添加/移除：true添加，false移除
    bar.classList.toggle('hero-icon-bar-scroll', isScrolled);
  });
});

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