getelementsbyclassname仅支持按class属性筛选，无法匹配data-等自定义属性；应使用queryselectorall配合属性选择器（如[data-type="user"]）实现精准筛选。
document.getElementsByClassName 本身不支持“按属性”筛选，它只认类名（class 属性的值），不能传入 data-* 、id、name 等其他属性。如果你想要“具备相同属性”的节点（比如所有 data-type="user" 的元素），直接用这个方法是拿不到的。
为什么 getElementsByClassName 无法匹配 data- 属性或自定义属性
这个 API 的设计目标非常明确：只根据 HTML 元素的 class 属性值返回元素集合。它的参数是字符串，且内部只做类名 token 匹配（空格分隔），不解析、不判断其他属性是否存在或相等。
常见错误现象：
- 写 document.getElementsByClassName("data-role='sidebar'") → 返回空集合，语法无效，甚至报错
- 写 document.getElementsByClassName("data-role") → 只找 class 名为 data-role 的元素，不是找有 data-role 属性的元素
替代方案：用 querySelectorAll 配合属性选择器
真正能按属性批量获取节点的是 document.querySelectorAll，它支持 CSS 属性选择器语法，灵活且语义准确。
- 要选所有带
data-status属性的元素：document.querySelectorAll("[data-status]") - 要选
data-status="active"的元素：document.querySelectorAll("[data-status='active']") - 要选 class 含
btn且data-role="submit"的元素：document.querySelectorAll(".btn[data-role='submit']") - 注意：属性值含特殊字符（如点、括号）需加引号；大小写敏感（HTML 中属性名不区分大小写，但值区分）
兼容性与性能提醒
querySelectorAll 在 IE8+ 全面支持，现代项目基本无需顾虑。相比 getElementsByClassName，它返回的是静态 NodeList（不会随 DOM 变化自动更新），这点反而更可控。
- 性能上：简单类名查询（如
".item"）和getElementsByClassName差距极小；带属性条件时略慢，但对几百个节点毫无感知 - 别误用
document.getElementsByTagName("*")加循环判断属性——代码冗长、性能差、易出错 - 如果真要“类名 + 属性”双重过滤，不要分两步（先 getElementsByClassName 再遍历判断属性），直接用复合选择器一步到位
真正需要按属性取节点时，别被方法名带偏——getElementsByClassName 就是为 class 生的，换用 querySelectorAll 才是直击问题的解法。属性值里有空格、引号或正则特殊字符时，容易漏转义，这是最常卡住的地方。
