getElementById 和 querySelector 都是 JavaScript 中用于选择 HTML 元素的方法，但它们之间有一些关键区别：
1. 选择方式:
-
getElementById: 通过元素的 ID 来选择元素。 HTML 中的 ID 必须是唯一的，因此getElementById总是返回单个元素（或者null，如果找不到该 ID）。 这是获取特定元素最快捷的方法。 -
querySelector: 通过 CSS 选择器 来选择元素。 这意味着你可以使用各种 CSS 选择器，例如标签名、类名、属性等等，来选择元素。querySelector只返回匹配选择器的第一个元素（或者null，如果找不到匹配的元素）。
2. 返回值:
-
getElementById: 返回一个 单一的 DOM 元素对象 或null。 -
querySelector: 返回一个 单一的 DOM 元素对象 或null。
3. 多个元素:
-
getElementById: 不适用于选择多个元素。因为它依赖于唯一的 ID。 -
querySelector: 虽然只返回第一个匹配的元素，但可以使用querySelectorAll来选择所有匹配选择器的元素，它返回一个NodeList。
4. 性能:
-
getElementById: 通常情况下，getElementById比querySelector更快，因为它直接通过 ID 查找元素。 -
querySelector:querySelector需要解析 CSS 选择器，因此在复杂的选择器或大型 DOM 树中可能会稍微慢一些。
总结:
| 特性 | getElementById |
querySelector |
|---|---|---|
| 选择方式 | ID | CSS 选择器 |
| 返回值 | 单个元素或 null | 单个元素或 null |
| 多个元素 | 不支持 | 使用 querySelectorAll |
| 性能 | 更快 | 可能稍慢 |
示例:
<!DOCTYPE html>
<html>
<head>
<title>getElementById vs querySelector</title>
</head>
<body>
<div id="myDiv" class="myClass">Hello</div>
<div class="myClass">World</div>
<script>
// 使用 getElementById
const elementById = document.getElementById("myDiv");
console.log(elementById.textContent); // 输出: Hello
// 使用 querySelector
const elementByClass = document.querySelector(".myClass");
console.log(elementByClass.textContent); // 输出: Hello (只返回第一个匹配的元素)
// 使用 querySelectorAll
const allElementsByClass = document.querySelectorAll(".myClass");
allElementsByClass.forEach(element => console.log(element.textContent)); // 输出: Hello 和 World
</script>
</body>
</html>
总而言之，如果你需要根据 ID 选择一个特定的元素，getElementById 是最佳选择。 如果你需要根据其他条件（例如类名、标签名或属性）选择元素，或者需要选择多个元素，则应使用 querySelector 或 querySelectorAll。