getElementsByClassName 返回实时HTMLCollection，需用索引访问元素；支持多类名“且”关系匹配；兼容性好但无CSS选择器功能，复杂场景推荐 querySelector/querySelectorAll。
getElementsByClassName 是 JavaScript 中用于根据类名获取元素的原生方法，它返回一个HTMLCollection（类似数组的实时集合），包含所有具有指定类名的元素。
基本用法：传入类名字符串
只需调用 document.getElementsByClassName("类名")，注意：不要加点号（.），直接写类名本身。
-
document.getElementsByClassName("box")→ 获取所有 class="box" 的元素 -
document.getElementsByClassName("active highlight")→ 获取同时拥有active和highlight两个类的元素（空格分隔，表示“且”关系）
获取单个元素？需要手动取索引
该方法不返回单个元素，即使只有一个匹配项，也返回 HTMLCollection。要操作具体元素，需通过下标访问：
-
document.getElementsByClassName("btn")[0]→ 第一个 class="btn" 的元素（常用） -
document.getElementsByClassName("item").length→ 获取匹配数量 - 若不确定是否存在，建议先判断长度：
const els = document.getElementsByClassName("nav"); if (els.length > 0) { els[0].style.color = "red"; }
注意：HTMLCollection 是“实时”的
它会自动响应 DOM 变化 —— 后续动态添加或删除同类名元素，集合内容会随之更新。这和 querySelectorAll 返回的静态 NodeList 不同。
- 例如：先用
let list = document.getElementsByClassName("item")，再用 JS 添加一个新，list.length会立刻增加 - 遍历时若同时修改 DOM（如删除元素），可能跳过或重复处理，建议转成数组再操作：
[...list].forEach(el => el.remove())
兼容性与替代建议
该方法在所有现代浏览器及 IE6+ 中都支持，完全可用。但若需更灵活的选择（如组合选择器、伪类等），推荐搭配使用：
-
document.querySelector(".box")→ 返回第一个匹配的元素（支持 CSS 选择器语法） -
document.querySelectorAll(".box.active")→ 返回静态 NodeList，支持复杂选择器
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
