本文详解如何通过 `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 结构是：
<span class="icon-bar bar-top"></span> <span class="icon-bar bar-middle"></span> <span class="icon-bar bar-bottom"></span>
那么该选择器完全适用（.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 < 56 存在逻辑重叠（46–55 区间会反复增删），推荐改为清晰的阈值切换，例如：
if (scrollY >= 46) { iconBars.forEach(el => el.classList.add('hero-icon-bar-scroll')); } else { iconBars.forEach(el => el.classList.remove('hero-icon-bar-scroll')); } - 可封装为复用函数，提升可维护性；
- 若需兼容 IE，可用 Array.from(iconBars).forEach(...) 或传统 for 循环。
掌握选择器语法与 NodeList 遍历，是实现响应式 DOM 操作的基础能力。
