推荐使用 queryselectorall('[class]') 配合 el.classlist 和 startswith() 精确筛选 class 以指定前缀开头的元素，语义清晰、兼容性好；旧浏览器可退化为 classname.split() + indexof()。
可以用 document.querySelectorAll 配合属性选择器，筛选 class 属性值以指定前缀开头的元素。
使用属性选择器 [class^="prefix"]
这是最直接的方式，匹配 class 属性**字符串以某前缀开头**的元素（注意：是整个 class 属性值，不是单个类名）：
-
[class^="btn-"]会匹配<div class="btn-primary">，但也会错误匹配 <code><span class="btn-secondary large"></span>（因为整个 class 字符串以 "btn-" 开头） - 它不区分单词边界，所以不够精确，仅适用于每个元素只有一个类、或确定 class 值总是以该前缀打头的简单场景
更准确：用 [class~="..."] + 正则或 filter
[class~="btn"] 匹配 class 列表中**包含完整单词 "btn"** 的元素，但它不能做“前缀匹配”。因此需结合 JavaScript 过滤：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const prefix = 'btn-';
const elements = Array.from(document.querySelectorAll('[class]')).filter(el => {
return el.classList && Array.from(el.classList).some(cls => cls.startsWith(prefix));
});
-
el.classList是安全可靠的类名集合（自动处理空格、重复、顺序） -
cls.startsWith(prefix)精确判断某个类是否以目标前缀开头 - 兼容所有现代浏览器，语义清晰，推荐在多数项目中使用
兼容旧浏览器的备选方案（如 IE9）
若需支持不支持 classList 的老环境，可手动解析 className 字符串：
const prefix = 'btn-';
const elements = Array.from(document.querySelectorAll('[class]')).filter(el => {
const classes = el.className.trim().split(/\s+/);
return classes.some(cls => cls && cls.indexOf(prefix) === 0);
});
- 用
split(/\s+/)拆分多个类名，避免空字符串干扰 -
cls.indexOf(prefix) === 0等价于startsWith，兼容性更好 - 注意跳过空类名（
cls && ...）
封装成可复用函数
把逻辑收拢，提高可读性和复用性：
function queryByClassPrefix(prefix) {
if (!prefix || typeof prefix !== 'string') return [];
return Array.from(document.querySelectorAll('[class]')).filter(el =>
Array.from(el.classList || []).some(cls => cls.startsWith(prefix))
);
}
<p>// 使用
const btnElements = queryByClassPrefix('btn-');
const iconElements = queryByClassPrefix('icon-');</p>
- 加参数校验，避免意外报错
- 内部仍优先使用
classList，简洁可靠 - 调用时语义明确，无需重复写过滤逻辑
