在 JavaScript 中，获取 DOM（文档对象模型）元素有多种方法，常用的包括以下几类：
1. 通过 ID 获取
document.getElementById("myId");
- 返回具有指定
id的单个元素（null如果未找到）。 - 是最快速、最直接的方式之一。
2. 通过类名获取
document.getElementsByClassName("myClass");
- 返回一个 HTMLCollection（类数组），包含所有具有指定 class 的元素。
- 注意：返回的是动态集合（会随 DOM 变化而更新）。
3. 通过标签名获取
document.getElementsByTagName("div");
- 返回一个 HTMLCollection，包含所有指定标签名的元素。
4. 通过 name 属性获取（主要用于表单）
document.getElementsByName("username");
- 返回一个 NodeList，常用于
<input name="...">等表单控件。
5. 使用 CSS 选择器（现代推荐方式）
获取第一个匹配的元素：
document.querySelector(".myClass"); // 类选择器
document.querySelector("#myId"); // ID 选择器
document.querySelector("div"); // 标签选择器
document.querySelector('div[data-id="1"]'); // 属性选择器等
获取所有匹配的元素：
document.querySelectorAll(".myClass");
- 返回一个 静态 NodeList（不会随 DOM 更新而变化）。
- 支持任意有效的 CSS 选择器，功能强大且灵活。
6. 其他上下文中的查询（如在某个元素内部查找）
const container = document.getElementById("container");
container.querySelector(".item");
container.querySelectorAll(".item");
小结对比
| 方法 | 返回类型 | 是否动态 | 支持复杂选择器 |
|---|---|---|---|
getElementById | Element / null | 否 | ❌ |
getElementsByClassName | HTMLCollection | ✅ | ❌ |
getElementsByTagName | HTMLCollection | ✅ | ❌ |
getElementsByName | NodeList | ✅ | ❌ |
querySelector | Element / null | 否 | ✅ |
querySelectorAll | NodeList（静态） | ❌ | ✅ |
建议：现代开发中优先使用
querySelector和querySelectorAll，因为它们语法简洁、功能强大，并且支持完整的 CSS 选择器。
