JS通过className使用querySelector过滤元素方法

JavaScript 的 `querySelector` 和 `querySelectorAll` 方法通过灵活运用 CSS 类选择器语法，实现了对 DOM 元素的精准定位——单个类名用 `.class`，多个类名交集匹配只需连写如 `.a.b`（表示同一元素同时拥有 a 和 b 类），还可与标签名、属性选择器、伪类等自由组合以提升筛选精度；需特别注意 `.a.b`（同元素多类）与 `.a .b`（后代关系）的本质区别，避免常见误用，让前端开发中的元素查找更高效、准确且可读性强。

在 JavaScript 中，可以通过 querySelector 使用 CSS 类选择器语法，直接按一个或多个 class 名精确筛选元素。

单个 className 过滤

最基础的方式是用点号（.）加类名，例如：

• document.querySelector('.btn') —— 获取第一个带 class="btn" 的元素
• document.querySelectorAll('.item') —— 获取所有带 class="item" 的元素 NodeList

多个 className 同时匹配（交集）

当元素需同时具备多个 class（即 class 属性中包含全部指定类），把它们连写、不加空格即可：

• document.querySelector('.btn.primary') → 匹配
• document.querySelectorAll('.card.active.highlight') → 匹配同时有 card、active、highlight 三个类的元素

注意：顺序无关，只要 class 属性中完整包含这些类（以空格分隔）就匹配。

组合其他选择器增强过滤

可以和标签名、属性、伪类等混用，提升精度：

• document.querySelector('div.error.message') → 必须是
  且同时有 error 和 message 类
• document.querySelector('[data-status="pending"].task') → 具有指定属性 且 包含 task 类的元素
• document.querySelector('.nav a.active') → .nav 内部的 （后代关系，中间有空格）

常见误区提醒