最直接的方法是 document.queryselector()，它返回首个匹配 css 选择器的元素，如 ".btn"；无匹配时返回 null，需判空；支持复杂选择器，性能优于 getelementsbyclassname。
用 document.querySelector() 最直接，它返回文档中第一个匹配指定 CSS 选择器的元素。
使用 querySelector 获取首个匹配节点
传入以点号开头的类名选择器（如 ".my-class"），它会从上到下查找，遇到第一个就停止并返回：
-
document.querySelector(".btn")→ 返回第一个 class 含btn的元素 - 若无匹配，返回
null，使用前建议判空 - 支持复杂选择器，比如
".container .item.active"
注意：getElementsByClassName 返回的是 HTMLCollection
document.getElementsByClassName("my-class") 返回的是实时集合，不是数组，不能直接用 [0] 以外的方式取首项——但可以：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
document.getElementsByClassName("my-class")[0]→ 可行，但不推荐作为首选 - 该集合是动态的，DOM 变化时会自动更新，可能引发意料外行为
- 性能略低于
querySelector，尤其在大文档中
如果必须用类名且需兼容老环境
在不支持 querySelector 的极旧浏览器（如 IE7-）中，可降级使用 getElementsByClassName 并取索引 0：
const el = document.getElementsByClassName("alert")[0] || null;- 记得加
|| null避免undefined导致报错 - 现代项目基本无需考虑此兼容，优先选
querySelector
不需要遍历或写循环，querySelector 就是专为这种“找第一个”场景设计的。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
