DOM 是什麼？前端工程師必學的文件物件模型（Document Object Model）
前言 無論是使用 JavaScript、jQuery、React、Vue 或 Angular，背後都離不開一個重要的核心概念：DOM（Document Object Model）。 當使用者點擊按鈕、輸入文字、切換畫面時，網頁內容之所以能夠即時更新，都是透過 DOM 操作完成的。 本文將帶你了解 DOM 的運作原理、常見操作方式，以及它在現代前端開發中的角色。 DOM 是什麼？ DOM（Document Object Model，文件物件模型）是瀏覽器將 HTML 文件轉換成的一種樹狀結構（Tree Structure）。 瀏覽器讀取 HTML 後，會將每個標籤轉換成節點（Node），形成一棵 DOM Tree。 例如： <html> <body> <h1>Hello DOM</h1> <button>Click Me</button> </body> </html> 會轉換成： Document │ └── html │ └── body │ ├── h1 │ └── "Hello DOM" │ └── button └── "Click Me" JavaScript 可以透過 DOM API 存取這些節點，進而修改畫面內容。 為什麼需要 DOM？ 如果沒有 DOM： JavaScript 無法讀取網頁內容 無法修改畫面 無法處理使用者互動 網頁只能顯示靜態內容 DOM 提供了 JavaScript 與 HTML 之間的橋樑。 例如： document.getElementById("title").innerText = "Hello World"; 執行後： <h1 id="title">Hello World</h1> 畫面就會立即更新。 常見 DOM 操作 1. 取得元素 透過 ID： const title = document.getElementById("title...