getElementById和querySelector方法的區別是什麼？

王铁柱6發表於2024-11-28

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。

相關文章