靜態管理畫面已完成，今天開始讓 JavaScript 找到畫面上的元素。

DOM 是 JavaScript 看到的頁面

瀏覽器讀取 HTML 後，會將標籤整理成可供程式操作的文件物件模型，也就是 DOM，JavaScript 取得元素後，才能讀取文字、修改 class 或登記事件。

DOM 元素不是 HTML 字串的複製品，而是目前頁面中的物件參照，後續修改 statusEl.textContent 時，瀏覽器畫面會直接更新，不需要重新建立整份 HTML 文件。

Day 19 預先建立的 id="status" 與 id="toggle-btn"，就是 JavaScript 尋找元素時使用的固定名稱。

在 HTML 載入 app.js

將下列 script 標籤放在 index.html 的 </body> 前面。

  <script src="app.js"></script>  <!-- 本日新增 -->
</body>

把 JavaScript 放在 body 內容之後，瀏覽器會先建立標題、狀態區與按鈕，再執行 app.js，程式取得元素時，它們已經存在。

若 script 放得太早，又沒有等待頁面載入完成，getElementById() 可能找不到元素並得到 null，本系列使用放在 body 結尾的方式保持流程簡單。

取得狀態區與按鈕

建立 assets/app.js，加入以下程式。

// 本日新增
const statusEl = document.getElementById("status");
const toggleBtn = document.getElementById("toggle-btn");

console.log(statusEl);
console.log(toggleBtn);

const 用來建立不重新指定的參照，statusEl 指向狀態 <div>，toggleBtn 則指向按鈕元素。

使用 const 並不表示元素內容永遠不能改變，而是變數不會改去指向另一個物件，日後仍可更新 statusEl 的文字與 class，這正是保存 DOM 參照的主要用途。

變數名稱尾端的 El 代表 element，這只是命名慣例，目的是讓閱讀者知道變數保存的是 DOM 元素，而不是 ON／OFF 文字或布林狀態。

名稱必須與 HTML 完全一致

document.getElementById("status") 會尋找 id="status"，document.getElementById("toggle-btn") 則尋找 id="toggle-btn"，字串中的連字號與大小寫都不能改變。

若 HTML 將按鈕寫成 toggle_btn，JavaScript 卻仍尋找 toggle-btn，結果便是 null，後續呼叫事件函式時就會發生錯誤。

固定元素名稱能讓 HTML、CSS 與 JavaScript 共用相同介面，因此完成後不應隨意更名。

用主控台確認取得結果

重新整理頁面並開啟瀏覽器開發者工具，Console 應顯示一個狀態 div 與一個 button 元素，而不是兩個 null。

可在 Console 中展開元素，確認狀態區包含 id="status"、class="off" 與文字 OFF，按鈕則包含 id="toggle-btn" 與「切換 LED」。

本日不修改元素內容，因此頁面外觀與 Day 22 完全相同，點擊按鈕也仍沒有程式反應。

可在 Console 輸入 statusEl.textContent 查看目前的 OFF，也可查看 toggleBtn.textContent 是否為「切換 LED」，這些讀取動作能確認變數確實連到預期元素，測試時不要直接手動修改狀態來冒充 MCU 回報。

不要在 JavaScript 保存 ledState

statusEl 只是畫面元素參照，不是 LED 真實狀態，JavaScript 之後可以修改它的文字與 class，但資料仍必須來自 MCU 的回報。

今天不建立 let ledState 或其他前端狀態變數，避免瀏覽器形成第二個可自行修改的答案，這項規則會一路保留到最終版本。

可暫時將其中一個 ID 故意拼錯並重新整理，Console 應出現 null，恢復正確名稱後再取得元素，這個對照能讓讀者理解 DOM 查找完全依賴名稱配對，也說明後續事件失敗時應先檢查元素參照，而不是直接懷疑 Python。

本日結束時，Console 應只顯示兩個正確 DOM 元素，頁面內容與 MCU 狀態則完全不變，兩個變數也應一直指向原本元素。

元素參照建立後，後續事件與畫面更新都應沿用這兩個固定變數。

本篇完成內容

• 在 HTML 載入 assets/app.js。
• 使用 const 保存 DOM 元素參照。
• 以 getElementById() 找到狀態區與按鈕。
• 透過 Console 確認元素不是 null。

現在 JavaScript 已經找到狀態區與按鈕，但還不知道使用者何時點擊，下一篇要替按鈕登記 click 事件，讓每一次操作都有反應。

下一篇｜接住使用者互動操作事件