如何使用 JavaScript 同时选中多个具有不同类名的 CSS 元素

本文详解如何通过 `queryselectorall` 正确选择多个带不同类名的 dom 元素，并批量操作其样式，解决因误用多参数或未遍历 nodelist 导致的“选择失败”问题。

在 javaScript 中，document.querySelector() 仅返回第一个匹配的元素，而 document.querySelectorAll() 返回的是一个静态 nodeList（类似数组的集合），可用于批量操作多个元素。但关键前提在于：你必须传入一个合法的、逗号分隔的 css 选择器字符串，而非多个独立参数。

你当前的写法：

document.querySelector('.icon-bar.bar-top', '.icon-bar.bar-middle', '.icon-bar.bar-bottom');

是错误的——querySelector 和 querySelectorAll 只接受单个字符串参数。传入多个参数会被忽略，仅解析第一个，且 .icon-bar.bar-top 这样的写法本身表示“同时拥有 icon-bar 和 bar-top 两个类”的元素（即复合类），而你的 html 中实际结构更可能是三个独立元素，分别带有 bar-top、bar-middle、bar-bottom 类，且都属于 icon-bar 组。

✅ 正确做法是使用选择器组（Selector Grouping），用英文逗号 , 分隔多个选择器，例如：

立即学习“Java免费学习笔记（深入）”；

const iconBars = document.querySelectorAll(   '.icon-bar.bar-top, .icon-bar.bar-middle, .icon-bar.bar-bottom' );

⚠️ 注意：上述写法要求每个元素同时具备 icon-bar 和对应位置类（如 bar-top）。如果你的 HTML 结构是：

那么该选择器完全适用（.icon-bar.bar-top 等价于 [class~=”icon-bar”][class~=”bar-top”]）。

但如果类名命名不统一（例如缺少 icon-bar 前缀），更健壮的写法是：

const iconBars = document.querySelectorAll('.bar-top, .bar-middle, .bar-bottom');

选中后，需显式遍历 NodeList 才能对每个元素执行操作（NodeList 不支持 .forEach() 在旧版 IE 中，但现代浏览器完全支持）：

window.addEventListener('scroll', () => {   const scrollY = window.scrollY;   if (scrollY >= 46) {     iconBars.forEach(el => el.classlist.add('hero-icon-bar-scroll'));   } else if (scrollY < 56) {     iconBars.forEach(el => el.classList.remove('hero-icon-bar-scroll'));   } });

? 补充建议：

• 使用 scrollY >= 46 和 scrollY
• 可封装为复用函数，提升可维护性；
• 若需兼容 IE，可用 Array.from(iconBars).foreach(…) 或传统 for 循环。

掌握选择器语法与 NodeList 遍历，是实现响应式 DOM 操作的基础能力。