如果把整個網頁比喻成一隻貓，DOM 就是貓身上的各個部位與神經反射。
可以透過與特定部位互動，觸發不同的反應：
拍拍貓屁股：觸發「發出呼嚕聲」的反應。
摸貓咪前爪：觸發「揮你一拳」的反應。
在網頁中也是一樣的道理：JavaScript 可以透過 DOM 找到網頁的「按鈕部位」，並設定使用者「點擊」時要跳出什麼反應。
在網頁開發中，我們寫的 HTML 其實只是一串由文字構成的結構標籤。
當瀏覽器載入 HTML 檔案時，會將這些文字標籤解析並轉換成一個樹狀結構的物件體系，這個結構就稱為 DOM（Document Object Model，文件物件模型） 。
瀏覽器解析 HTML 後形成的樹狀結構，會將每一個標籤（如 <h1>、<p>、<div>）都視為一個 節點（Node）：
(維基百科上的例子示意圖)
DOM是 HTML 與 JavaScript 之間的橋樑。
JavaScript 本身無法直接修改純文字的 HTML 檔案，但可以透過 DOM 提供的 API（例如 document.querySelector 或 document.getElementById）來：
定位節點：找到網頁上的特定元素（如按鈕、輸入框）。
動態修改：即時變更文字內容、替換 CSS 樣式。
監聽事件：接收使用者的點擊、滾動或輸入行為並做出回應。
在撰寫 JavaScript時，通常會建議將 <script> 標籤放在 HTML中 <body> 的最底部（即 </body> 關閉標籤的正上方）。
因為瀏覽器解析 HTML 是「由上而下」執行的。如果 JavaScript 太早執行，當時瀏覽器可能還沒渲染完網頁元素（節點），導致 JS 找不到 DOM 元素而報錯。
因此必須讓瀏覽器先讀取完所有 HTML 節點後再執行 JS，程式才能正確操作網頁。
(參考資料：Wikipedia - 文件物件模型)
個人筆記：
JS DOM | 取得元素的方法：querySelector、querySelectorAll 與傳統選擇器
JS DOM | 選取多個元素時的集合：NodeList vs HTMLCollection 有何不同？
aria_carrot
iThome鐵人賽
看影片追技術