如何用querySelector选择至少一个类名以指定字符串结尾的元素

问题场景 #

假设有一个简单元素：

<div class="background-row"></div>

要选择类名以-row结尾的元素，最初用的选择器是：

.querySelector("[class$='-row']")

但当元素包含多个类（比如 <div class="background-row some_other_class"></div>）时，这个方法会失效——因为[class$='-row']只会匹配整个class属性值以-row结尾的元素，当目标类不是最后一个类时就无法命中。

解决方案 #

修改选择器，覆盖「目标类是最后一个」和「目标类在中间」两种情况，使用以下写法：

// 选中单个符合条件的元素
document.querySelector("[class$='-row'], [class*='-row ']")

// 选中所有符合条件的元素
document.querySelectorAll("[class$='-row'], [class*='-row ']")

原理说明 #

• [class$='-row']：匹配class属性最后一个类是以-row结尾的元素（包括只有这一个类的情况）
• [class*='-row ']：匹配class属性中包含-row （目标类后面跟着空格）的元素，也就是目标类处于多个类中间的情况
• 用逗号分隔两个选择器，实现「或」的逻辑，覆盖所有至少有一个类以-row结尾的场景

如果想让代码更简洁，也可以用CSS的:is()伪类简化：

document.querySelector(":is([class$='-row'], [class*='-row '])")

内容的提问来源于stack exchange，提问作者Mihai Alexandru-Ionut