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

By徐培鈞
LinkedIn

更新日期： 2023 年 12 月 1 日

在網頁開發中，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 網頁開發中最常用的工具之一。

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 = “新的文本”;

每個 HTML 元素都有一套特定的屬性和方法，這些屬性和方法與該元素的功能和用途相關。當你熟悉 HTML 和 DOM API 時，這些會變得相對直觀。

  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”;

每個 HTML 元素都有一套特定的屬性和方法，這些屬性和方法與該元素的功能和用途相關。當你熟悉 HTML 和 DOM API 時，這些會變得相對直觀。

       <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 = “新的輸入值”;

    每個 HTML 元素都有一套特定的屬性和方法，這些屬性和方法與該元素的功能和用途相關。當你熟悉 HTML 和 DOM API 時，這些會變得相對直觀。

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

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

    通過這些範例，您可以看到如何利用 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。如果不檢查此返回值，對其進行操作可能會導致錯誤。
    • 解決方案：在對返回的元素進行操作之前，檢查它是否存在。例如：
    const element = document.getElementById('myDiv');
if (element) {
  // 進行操作
}

    與其他選擇器混淆

    • 問題描述：有時，開發者可能會混淆 getElementById 與其他方法，如 getElementsByClassName 或 querySelector。
    • 解決方案：確保您知道每種方法的返回類型和用法，並根據需要選擇正確的方法。

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

    結語

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

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

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

    Similar Posts

    App Script 特殊標記符號(Scriptlet) 解析

    By徐培鈞

    在 Google Apps Script 中，有一種稱為特殊的語法：Scriptlets。

    它主要的目的，是允許你在一般的 HTML 檔案中，嵌入 Apps Script 代碼，並在 Google 架設的伺服器中計算運算的結果。

    藉由這些 Scriptlets 讓 HTML 頁面也可以動態生成內容，提供了一種強大的機制，創造一個結合前端與後端的網頁應用程序（Web App）。