querySelectorAll匹配多类元素 如何仅选中纯main类目标元素

问题场景示例 #

给定如下DOM结构：

<div class="main"></div>
<div class="main child"></div>

直接执行document.querySelectorAll(".main")时，会同时命中两个div：一个是仅带main类的元素，一个是同时带main、child两个类的元素，无法精准筛选出目标元素。 #

实现方案 #

方案1：使用属性精确匹配选择器（最简洁）

直接用属性等于选择器，匹配class属性值完全为main的元素即可：

document.querySelectorAll('[class="main"]')

实现原理：CSS属性选择器[attr="value"]只会匹配属性attr的字符串值完全等于value的元素。带多个类的元素class属性值为main child，和main不相等，因此不会被选中。

注意：这个方案无法匹配class属性前后带多余空格的写法，比如<div class=" main "></div>（虽然实际只有main一个类，但class属性值带前后空格，精确匹配会失效）。

方案2：遍历过滤类列表（兼容性、鲁棒性更强）

如果需要兼容class属性书写时带多余空格的场景，可以先选出所有带main类的元素，再通过classList判断元素是否只有一个类、且这个类是main：

Array.from(document.querySelectorAll('.main')).filter(el => {
  return el.classList.length === 1 && el.classList.contains('main')
})

这个方案不会受class属性里多余空格、类名书写顺序影响，只要元素实际挂载的类只有main一个，就会被选中，不会出现误判、漏判。

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