推荐使用 document.queryselectorall() 查找 dom 元素，它返回静态 nodelist，支持带点号的类名（如 ".btn"）、复杂选择器，原生兼容 foreach；而 getelementsbyclassname() 返回实时 htmlcollection，需手动转数组，仅在需动态响应 dom 变化时选用。
在 JavaScript 中，可以通过 document.getElementsByClassName() 或更现代的 document.querySelectorAll() 方法，根据类名查找多个 DOM 元素。
使用 getElementsByClassName()
该方法返回一个 HTMLCollection（实时集合），包含所有具有指定类名的元素：
- 传入类名字符串（不带点号），例如
"btn"，不是".btn" - 支持多个类名，用空格分隔，如
"active highlight"，表示同时拥有这两个类的元素 - 结果是实时的：DOM 变化会自动反映在集合中
- 需手动转换为数组才能使用
forEach等数组方法，例如：Array.from(document.getElementsByClassName("item")).forEach(el => console.log(el));
使用 querySelectorAll()（推荐）
该方法返回一个 NodeList（静态快照），更灵活且功能更强：
- 类名前必须加点号，例如
".card"或".btn.primary" - 支持复杂选择器，如
".nav li a.active"、".item:not(.disabled)" - 结果不会随 DOM 变化而更新，更可预测
- 原生支持
forEach（现代浏览器），也可用展开语法转数组：[...document.querySelectorAll(".modal")].forEach(modal => modal.remove());
注意 class 名含空格的含义
类名本身可以含空格（如 class="my class"），但这是**非法 HTML**，会导致解析为两个独立类 "my" 和 "class"。实际开发中应避免，用连字符或下划线代替，例如 "my-class"。
兼容性与建议
querySelectorAll 在 IE8+ 完全支持，getElementsByClassName 在 IE9+ 支持。日常开发优先用 querySelectorAll，语义清晰、能力全面、写法统一；仅在需要监听 DOM 动态变化且依赖实时集合时，才考虑 getElementsByClassName。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
