getElementById和querySelector方法的区别是什么？

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>