getElementById和getElementsByClassName的区别

`getElementById` 和 `getElementsByClassName` 都是 JavaScript 中用于操作 HTML 元素的方法，它们的主要区别在于：

1. **选择元素的方式**：
- `getElementById`: 这个方法返回匹配指定 id 的第一个元素。id 属性在整个文档中应该是唯一的，所以它总是返回单个元素，如果没有找到则返回 null。
- `getElementsByClassName`: 这个方法返回所有具有指定 class 名称的元素集合。class 名称可以有重复，因此返回的是所有匹配的元素列表。

2. **返回结果类型**：
- `getElementById` 返回单一 DOM 元素，类型通常是 Node 或 Element。
- `getElementsByClassName` 返回 NodeList 对象，这是类似于数组的集合，包含匹配的元素，需要进一步迭代才能访问每个元素。

3. **性能影响**：
- 因为 `getElementById` 搜索的是唯一标识符，所以性能通常较好，尤其是对于大型文档来说。
- 而 `getElementsByClassName` 在搜索具有多个同名 class 的元素时可能会涉及更多的查找和比较，性能相对较低。

4. **示例代码**：
- 获取 ID 为 "example" 的元素：`const element = document.getElementById("example");`
- 获取所有 class 名为 "exampleClass" 的元素：`const elements = document.getElementsByClassName("exampleClass");`

使用时要注意，`getElementsByClassName` 返回的是多个元素，如果只需要第一个，可以用 `.item(0)` 来取。