如何使用 JavaScript 同时选择多个具有不同类名的 CSS 元素_网络技术

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

发布时间 - 2026-01-06 00:00:00 点击率：次

本文详解如何用 document.queryselectorall() 正确选择多个带有不同组合类名的 dom 元素，并批量操作，解决因误传多个参数导致选择失败的常见问题。

在 JavaScript 中，document.querySelector() 和 document.querySelectorAll() 是最常用的 DOM 查询方法，但二者行为有本质区别：前者仅返回第一个匹配元素（单个 Element），后者返回所有匹配元素组成的静态 NodeList（类似数组）。你当前代码的问题根源在于错误地将多个选择器作为独立参数传入 querySelector()：

// ❌ 错误：querySelector 不支持多个参数，只识别第一个字符串
document.querySelector('.icon-bar.bar-top', '.icon-bar.bar-middle', '.icon-bar.bar-bottom');

同时，querySelectorAll() 本身是支持多组选择器的——但必须合并为一个字符串，用英文逗号分隔，而非多个参数：

// ✅ 正确：单个字符串，逗号分隔多个复合选择器
const iconBars = document.querySelectorAll(
  '.icon-bar.bar-top, .icon-bar.bar-middle, .icon-bar.bar-bottom'
);

注意：每个选择器都需完整、准确。例如 .icon.bar-bottom 在你的 HTML 中实际是 .icon-bar.bar-bottom（中间无空格），若写成 .icon.bar-bottom 将无法匹配——因为这表示同时拥有 icon 和 bar-bottom 两个类，而你的元素类名为 icon-bar 和 bar-bottom。

选中后，需遍历 NodeList 对每个元素单独操作。推荐使用 forEach()（现代浏览器原生支持）：

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

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'));
  }
});

⚠️ 注意事项：

querySelectorAll() 返回的是 NodeList，不是 Array，因此不能直接调用 map()、filter() 等数组方法（除非用 [...iconBars] 展开或 Array.from(iconBars) 转换）；
类名拼写与 HTML 中严格一致（区分大小写、连字符、空格）；
若元素动态插入，需确保查询时机在 DOM 渲染完成后（如放在 DOMContentLoaded 事件中）；
性能敏感场景下，可缓存 iconBars 结果，避免每次滚动都重复查询。

总结：多元素选择 ≠ 多参数传入；而是「一个字符串 + 多个逗号分隔的选择器」，再配合循环操作。掌握这一模式，即可高效统一控制导航图标、按钮组、卡片列表等任意批量 DOM 元素。

# css # javascript # java # html # node # 浏览器 # ssl # win # 区别 # 常见问题

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：拼多多官方网页版入口拼多多官网一键登录网址

下一篇：Sublime Text怎么快速注释代码_Sublime单行

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：拼多多官方网页版入口拼多多官网一键登录网址

下一篇：Sublime Text怎么快速注释代码_Sublime单行