完全指南：如何使用 JavaScript 的 getElementById 方法

Published September 13, 2023 by 徐培鈞
JavaScript

本文為 DOM 基本介紹系列文，第 6 篇：

  1. HTML DOM 破解：新手完全指南，帶你深入理解網頁結構
  2. 初學者指南：JavaScript 中的DOM 模型與HTML 的關係
  3. JavaScript 中的DOMContentLoaded：新手必讀指南
  4. JavaScript DOM 常見屬性介紹：給新手的指南
  5. 深入理解DOM 中的.parentNode 和.children 屬性
  6. 完全指南：如何使用JavaScript 的getElementById 方法　👈進度
  7. JavaScript 中querySelector 的使用指南：初學者必讀
  8. JavaScript 新增與移除DOM 元素：新手指南
  9. JavaScript DOM insertAdjacentElement() 使用指南：給新手的入門文章
  10. insertAdjacentElement 與 insertAdjacentHTML 的常見錯誤解析
  11. 使用 JavaScript 的 dataset 屬性：為 HTML 元素動態添加自訂屬性
  12. 新手指南：JavaScript classList 方法介紹

在網頁開發中，JavaScript 扮演著不可或缺的角色，使得網頁從靜態的文字和圖片，轉變為動態、互動的數位體驗。

為了達到這樣的效果，開發者需要有工具可以選取和操控網頁中的各個元素。

這就是 Document Object Model（DOM）登場的時候。

DOM 為我們提供了多種方法，讓我們能夠選取和操控 HTML 元素。

而在這些方法中，getElementById 是最簡單也是最直接的一種，允許我們快速選取有特定 ID 的元素。

對於初學者來說，瞭解如何有效地使用 getElementById 是進入 JavaScript 開發的關鍵步驟之一

在本文，我們將深入探討這個方法，並學習如何在實際開發中應用它。

希望通過這篇文章，您能夠建立堅實的基礎，並更自信地進行網頁開發。

什麼是 getElementById?

在 JavaScript 的世界中，當我們想要與網頁上的特定元素互動，我們需要一種方式來「選取」它。getElementById 正是這樣一個方法。

它允許我們直接通過 HTML 元素的 id 屬性來選取該元素。

具體來說，getElementById 是 Document Object Model（DOM）的一部分。

DOM 代表了網頁的結構，它把網頁的每一部分都當作物件，然後允許我們使用JavaScript來操控這些對象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM tree structure</title>
  </head>
  <body>
    <h1>DOM tree structure</h1>
    <h2>Learn about the DOM</h2>
  </body>
</html>

我們的檔案稱為「根」節點，其中包含一個「子」節點，即 <html> 元素。

<html> 元素包含兩個子節點，分別是 <head> 和 <body> 元素。<head> 和 <body> 元素都有它們自己的子節點。

以下是視覺化節點樹的呈現方式：

圖片來源：freecodecamp

每當您在網頁上看到動畫、彈出式視窗、互動式表單等動態內容，背後都可能有 DOM 操作在起作用。

getElementById 的工作原理相對簡單：

選取元素

當您在HTML中為元素設定了 id 屬性，例如：

<div id="myDiv">這是一個 div</div>

您就可以選取它。

document.getElementById('myDiv');

返回值

如果找到了具有指定ID的元素，getElementById 會返回該元素。否則，它會返回 null。

唯一性

重要的是要知道，每個 id 在一個 HTML 文件中應該是唯一的，這意味著沒有兩個元素應該有相同的 id。如果網頁上有多個元素使用了相同的 id，getElementById 只會返回第一個。

使用 getElementById，開發者不僅可以選取元素，還可以讀取或修改它的內容、樣式、屬性等，使其成為 JavaScript 網頁開發中最常用的工具之一。

延伸閱讀：HTML 中重複使用 ID 的影響：新手指南

getElementById 基本使用規則

getElementById 的使用規則很直觀，但要確保你已為想要選取的 HTML 元素設定了正確的 id 屬性。

以下是一些基本的步驟和範例來演示如何使用它：

  1. 設定元素的 ID：首先，您需要在 HTML 文件中為目標元素設定一個唯一的 id。例如：
<div id="greeting">嗨，歡迎光臨！</div>
  1. 使用 getElementById 選取元素：在 JavaScript 中，您可以使用 document.getElementById 並提供相對應的 id 來選取元素：
const greetingDiv = document.getElementById("greeting");

這會將 <div> 元素儲存到 greetingDiv 變數中。

  1. 操作選取的元素：一旦你選取了元素，你可以開始進行各種操作，如修改其內容、樣式等。以下是一些常見的範例
  • 更改元素的內容：
greetingDiv.innerHTML = "嗨，再次歡迎你！";
  • 更改元素的樣式：
greetingDiv.style.color = "blue"; 
greetingDiv.style.fontSize = "20px";
  • 添加事件監聽器: 
greetingDiv.addEventListener("click", function() { alert("您點擊了歡迎消息！"); });

注意事項

請確保在使用 getElementById 之前，目標元素已經載入完成。

否則，該函數可能返回 null。這是因為如果你的 JavaScript 代碼在 HTML 元素之前運行，它將無法找到那個元素。

一種常見的做法是將 JavaScript 放在 <body> 標籤的底部，或使用 DOMContentLoaded 事件來確保 DOM 已經載入完成。

實際操作範例

要真正了解 getElementById 的強大功能，實際操作和演示是最好的方法。

以下是一些常見場景的範例和步驟，供您參考和實踐。

  1. 改變按鈕點擊後的文本內容 HTML:
<button id="myButton">點擊我！</button>
<p id="displayText">等待按鈕被點擊...</p>

JavaScript:

   document.getElementById("myButton").addEventListener("click", function() {
       const textElement = document.getElementById("displayText");
       textElement.textContent = "按鈕已被點擊！";
   });

試著操作以上代碼，當您點擊按鈕時，下方的文本將會變更。

補充：textContent 屬性

  • 用途：textContent 屬性用於設置或取得指定節點及其所有後代的文本內容。
  • 適用元素：通常用於元素，如 <p>、<div>、<span>、<li> 等，這些元素主要用於顯示文本。
  • 舉例：如果你有一個 <p> 元素 pElement，並想要更改其文本，則可以使用 pElement.textContent = “新的文本”;
  1. 動態改變圖片 HTML：
   <img id="myImage" src="initial-image.jpg" alt="Initial Image">
   <button id="changeImageBtn">改變圖片</button>

JavaScript:

   document.getElementById("changeImageBtn").addEventListener("click", function() {
       const imageElement = document.getElementById("myImage");
       imageElement.src = "new-image.jpg";
   });

點擊按鈕後，圖片的來源將會被更換。

補充：src 屬性

  • 用途：src 屬性用於指定外部資源的 URL，如圖片或腳本。
  • 適用元素：用於元素如 <img>、<script>、<iframe> 等，這些元素需要引用外部資源。
  • 舉例：如果你有一個圖片元素 imgElement 並想要更改其圖片源，則可以使用 imgElement.src = "new-image.jpg";
  1. 動態取得輸入值：
   <input type="text" id="nameInput" placeholder="輸入您的名字">
   <button id="showNameBtn">顯示名字</button>
   <p id="nameDisplay">名字將顯示在這裡</p>

JavaScript:

   document.getElementById("showNameBtn").addEventListener("click", function() {
       const nameValue = document.getElementById("nameInput").value;
       const nameDisplayElement = document.getElementById("nameDisplay");
       nameDisplayElement.textContent = "您的名字是：" + nameValue;
   });

補充：value 屬性

  • 用途：value 屬性用於取得或設置某些特定元素的當前值。
  • 適用元素：用於表單元素，如 <input>、<select>、<textarea> 等，這些元素用於輸入或選擇數據。
  • 舉例：如果你有一個輸入元素 inputElement 並想要更改其輸入值，則可以使用 inputElement.value = "新的輸入值";

輸入您的名字，然後點擊按鈕，您的名字將會顯示在下方的段落中。

以上是三個基於不同場景的範例。

通過這些範例，您可以看到如何利用 getElementById 以及與之相關的 DOM 操作，來實現網頁中的動態交互效果。

為了更好的理解，建議您自行在瀏覽器或線上編輯器中嘗試這些代碼，親自體驗其效果。

其他選擇元素方法比較

在 JavaScript 中，除了 getElementById 外，還有其他的方法可以用來選擇和操作 DOM 元素。

這部分將介紹幾個常用的方法，並對比它們與 getElementById 的異同。

getElementsByTagName

  • 用途：根據標籤名稱選擇多個元素。
  • 回傳值：一個元素的 NodeList。
  • 範例：document.getElementsByTagName(‘div’)（選擇所有的 <div> 元素）

getElementsByClassName

  • 用途：根據 class 屬性選擇多個元素。
  • 回傳值：一個元素的 NodeList。
  • 範例：document.getElementsByClassName(‘highlight’)（選擇所有 class 為 highlight 的元素）

querySelector

  • 用途：使用 CSS 選擇器選擇第一個匹配的元素。
  • 回傳值：一個元素或 null。
  • 範例：document.querySelector(‘.highlight’)（選擇第一個 class 為 highlight 的元素）

querySelectorAll

  • 用途：使用 CSS 選擇器選擇所有匹配的元素。
  • 回傳值：一個元素的 NodeList。
  • 範例：document.querySelectorAll(‘div.highlight’)（選擇所有 class 為 highlight 的 <div> 元素）

補充：NodeList 與單一元素的差異

  1. 定義:
    • NodeList：是一群 DOM 元素的集合，可以想像它像是一個列表，列出特定條件下的所有元素。
    • 單一元素：是指 HTML 中的某一個特定標記，如 <div> 或 <p>。
  2. 取得方法:
    • 使用 document.querySelectorAll() 會回傳一個 NodeList，裡面包含所有符合條件的元素。
    • 使用 document.getElementById() 或 document.querySelector() 則會回傳單一的元素。
  3. 例子：
// 取得所有的 <p> 標籤 => NodeList
let paragraphs = document.querySelectorAll("p");

// 取得 id 為 "myDiv" 的元素 => 單一元素
let myDiv = document.getElementById("myDiv");

簡單來說，NodeList 是元素的集合（如一包糖果），而單一元素就是集合中的其中一項（如一顆糖果）。希望這個解釋讓你更容易理解！

對比與分析

getElementById 專為快速選擇具有特定 id 的元素而設計。

而且 id 在文檔中應該是唯一的，因此此方法總是返回單一元素或 null。

getElementsByTagName 和 getElementsByClassName 是當您需要選擇多個元素時的首選。

但它們比基於 CSS 選擇器的方法更不靈活。

querySelector 和 querySelectorAll 提供最大的靈活性，允許您使用任何 CSS 選擇器來選擇元素。但在某些情況下，它們可能會比上述方法慢一些，特別是當您正在選擇大量元素時。

總之，選擇使用哪一種方法取決於您的具體需求。了解這些方法的優缺點和適用場景，可以幫助您更高效地操作 DOM。

常見的錯誤與問題

在使用 getElementById 進行網頁開發時，開發者可能會遇到一些常見的錯誤和問題。

這一部分將列出這些問題，並提供解決方案。

非唯一的 ID

問題描述：在 HTML 文件中，每個 ID 應該是唯一的。如果有多個元素具有相同的 ID，getElementById 只會返回第一個匹配的元素。

解決方案：確保每個元素的 ID 都是唯一的。避免使用重複的 ID。

元素尚未載入

問題描述：當你的 JavaScript 代碼在 HTML 文檔的元素之前運行時，試圖選擇該元素可能會失敗，因為該元素尚未載入。

解決方案：將 JavaScript 代碼放在文檔的底部，或使用事件監聽器確保文檔已完全載入。

拼寫和大小寫錯誤

問題描述：ID 是區分大小寫的，因此 “MyID” 和 “myid” 是兩個不同的 ID。

解決方案：確保 JavaScript 中的 ID 名稱與 HTML 元素中的 ID 名稱完全匹配，包括大小寫。

忘記使用 document 前綴

問題描述：在使用 getElementById 時，必須在其前面添加 document，如 document.getElementById。有時開發者可能會忘記添加這個前綴。

解決方案：總是使用 document.getElementById 代替 getElementById。

錯誤的回傳值處理

問題描述：當沒有找到匹配的元素時，getElementById 會返回 null。如果不檢查此返回值，對其進行操作可能會導致錯誤。

解決方案：在對返回的元素進行操作之前，檢查它是否存在。

與其他選擇器混淆

問題描述：有時，開發者可能會混淆 getElementById 與其他方法，如 getElementsByClassName 或 querySelector。

解決方案：確保您知道每種方法的返回類型和用法，並根據需要選擇正確的方法。

通過瞭解和識別這些常見的問題，您可以更加輕鬆地避免錯誤，並確保您的 JavaScript 代碼正確且高效地運行。

結語

希望透過本文，你能夠對這些基本概念有所掌握，並在未來的開發旅程中，運用它們建構更完善、更有互動性的網頁應用。

記住，每一位優秀的開發者都是從基礎開始，一步步累積起來的。

祝你學習愉快，並期待你在程式的世界中創造出屬於自己的奇蹟。