优先使用 document.querySelectorAll() 筛选类名，它返回可直接 forEach 的静态 NodeList；document.getElementsByClassName() 返回实时 HTMLCollection，需转数组遍历，且仅支持简单类名匹配。
JavaScript 中通过类名筛选 DOM 元素，核心是使用 document.getElementsByClassName() 或更现代的 document.querySelectorAll()。两者都能获取具有指定类名的元素，但返回值类型、行为和适用场景不同，选对方法能避免常见坑。
用 getElementsByClassName 获取类名匹配的元素
这个方法返回一个实时的 HTMLCollection，即页面中类名动态增删时，集合内容会自动更新。
- 传入一个字符串参数，如
'btn'或'active highlight'（注意：多个类名必须写在同一字符串里，用空格分隔，不是数组） - 不支持 CSS 选择器语法，只认 class 属性值本身
- 返回结果不能直接调用
forEach，需转成数组或用传统for循环遍历
示例：
const items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
console.log(items[i].id); // 可安全访问 .id、.className 等属性
}
用 querySelectorAll 获取更灵活的类名匹配
这个方法返回一个静态的 NodeList，内容不会随 DOM 变化而自动更新，但支持完整 CSS 选择器语法，更推荐日常使用。
立即学习“Java免费学习笔记（深入）”；
- 可写
'.card'、'.btn.primary'、'div.container > .item'等复杂条件 - 返回值是类数组，支持
forEach、map、展开运算符（[...elements]）等数组方法 - 若只想取第一个匹配项，可用
querySelector('.my-class')，返回单个元素或null
示例：
const buttons = document.querySelectorAll('.btn.submit');
buttons.forEach(btn => {
btn.addEventListener('click', () => console.log(btn.id));
});
注意类名匹配的几个关键细节
类名筛选看似简单，但容易忽略这些实际影响：
- HTML 中 class 属性值是空格分隔的字符串，
class="a b"表示同时拥有两个类，不是“a 或 b” - 类名区分大小写，
'MyClass'和'myclass'是不同的 - 元素可能有多个类，但
getElementsByClassName('a')仍会匹配class="a b c"的元素 - 如果目标元素没有设置 id，
element.id返回空字符串，不是undefined，判断时建议用element.id !== ''
什么时候该换方法？
单纯按类名找元素，优先用 querySelectorAll；只有在需要监听 DOM 动态变化（比如配合 MutationObserver 做实时响应），且确定集合结构简单时，才考虑 getElementsByClassName。另外，如果只是操作单个已知类名的元素，且它在页面中唯一，用 querySelector 更轻量。
