好奇的動機 ： 從文字到動態畫面，揭秘 DOM 的魔法世界

什麼是 DOM？你已經在用但不知道它是什麼！

每次開啟網頁瀏覽時，從網頁到手機裡的APP，大家都在跟畫面裡的東西互動：點一個按鈕、滑一張圖片、填一個表單。這些看起來簡單的互動，其實背後有一個「魔法橋樑」讓這一切成為可能。這個橋樑就叫做 DOM。
為什麼要了解 DOM？
當後端把資料放進網頁時，它只是一堆文字和標籤，瀏覽器如何懂得哪些是標題？哪些是圖片？哪裡是按鈕？又是怎麼知道你點了按鈕後該做什麼？這就要靠 DOM 把這些文字變成可以被程式讀懂和操作的東西。
你可以想像，DOM 是瀏覽器裡根據 HTML 建立起來的「元素樹」，每個標籤都是樹上的一個節點，而且程式語言（JavaScript）可以像操控樹枝一樣操控這些元素，決定它們要顯示什麼、要不要消失，或是在點擊時發生什麼事情。

從後端看 DOM

對於後端工程師來說，DOM 代表著「從一台純文字的伺服器回應」到「動態互動的網頁畫面」的關鍵橋樑。懂 DOM 意味著理解前端如何將靜態的資料，配合使用者的操作，瞬間轉成活生生可互動的網頁，這對設計 API、資料格式、以及跟前端合作都非常重要。
接下來，會進一步介紹 DOM 是什麼，並舉簡單例子說明它怎麼運作。

何謂 DOM？

DOM**（Document Object Model**）是瀏覽器將收到的 HTML 轉成一個像樹狀結構的物件模型，裡面每個 HTML 元素（標籤）變成一個節點（物件）。這讓程式（JavaScript）可以用程式碼讀取或修改網頁內容，像是新增、刪除或改變元素內容。可以想像 DOM 就是 HTML 文件在瀏覽器裡被轉換成的「資料結構樹」，程式可以操作這棵樹，網頁就會改變。
瀏覽器解析範例 HTML 範本流程與問題

  var first = document.getElementById('first');
  addMessage(first, 'Page loading');
</script>
<ul id="first"></ul>

解析與執行流程：
1. 瀏覽器開始讀 HTML，從上到下解析建立 DOM 樹（節點樹）。
2. 讀到 <script>，瀏覽器會暫停解析 HTML，先執行此 script 裡的 JavaScript。
3. 這段 script 執行時，要透過 document.getElementById('first') 取得 <ul> 元素，但此時 <ul id="first"></ul> 還沒被瀏覽器解析（在 <script> 後面），造成找不到 first 元素而報錯或無法正確新增列表項目。
4. 解析完成 DOM 後繼續渲染網頁。

< 補充 >

問題與修正：
• 這段 JS 亂序去找還沒被解析的 DOM 元素。
• 解決方法：
• 把 <script> 放在頁尾，讓 DOM 先建立完成後才執行 JS。
• 或使用事件 DOMContentLoaded 來等待 DOM 完全建立後再執行操作。
• 或給 <script> 加 defer 屬性，告訴瀏覽器先解析 DOM 等 DOM 建立完再執行 JS。
JavaScript 事件註冊與取消方式
• 使用 element.addEventListener('事件名稱', 事件處理函式) 來註冊事件，這是目前最彈性的方式，可以註冊多個事件監聽。
• 取消事件監聽使用 element.removeEventListener('事件名稱', 事件處理函式)（需與註冊時同一函式）。
• 傳統也有 element.onclick = function(){} 方式，但只能註冊一個事件，後面的會蓋掉前面的。
• 新增功能：使用 AbortController 搭配事件註冊，可集中取消多個事件。