如何使用JavaScript querySelectorAll选取多类名多属性DOM元素

目标选取元素 #

你需要匹配的DOM元素代码如下：

<button aria-label="Show more replies" data-open-web-class="conversation-message-show-replies" type="button" class="Button__button--11-3-6 Button__action--11-3-6 Button__isEllipsis--11-3-6 spcv_showMoreRepliesText">1 reply</button>

原写法的错误点 #

你编写的选择器存在3个核心语法错误，是导致无匹配结果的直接原因：

• 混淆属性与类选择器规则：aria-label="Show more replies"是元素的自定义属性，不是class类名，不能直接用类选择器语法拼接；且类名不允许带空格，你写的.Show more replies会被浏览器解析为「class包含Show的元素内部的more元素内部的replies元素」，完全偏离匹配目标。
• 类选择器缺失前缀：Button__isEllipsis--11-3-6是class属性值，作为类选择器使用时前面必须加.，缺省的话浏览器会把它识别为标签名，自然没有匹配结果。
• 滥用空格分隔符：CSS选择器中的空格代表后代层级关系（即嵌套在当前元素内部的子/孙级元素），同一个元素的多个类选择器之间不能加空格，需要直接连写。

正确选取写法 #

你可以根据需求选以下任意一种写法，都可以匹配到目标元素：

1. 匹配自定义业务属性（稳定性最高，不会受class版本号变动影响）

document.querySelectorAll('button[data-open-web-class="conversation-message-show-replies"]');

2. 匹配aria-label无障碍属性

document.querySelectorAll('button[aria-label="Show more replies"]');

3. 全类名精确匹配

document.querySelectorAll('button.Button__button--11-3-6.Button__action--11-3-6.Button__isEllipsis--11-3-6.spcv_showMoreRepliesText');

选择器基础规则参考 #

常用CSS选择器语法规则：

• 标签选择器直接写标签名，例如button、div
• 类选择器需要在class值前加.，同一元素的多个类选择器直接连写，不要加空格
• id选择器需要在id值前加#
• 普通属性选择器格式为[属性名="属性值"]，可以和标签、类选择器直接拼接
• 空格仅用于匹配后代嵌套元素，同元素属性/类选择器之间禁止加无意义空格

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