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");

透過 Class：

const items = document.getElementsByClassName("item");

透過 CSS Selector：

const button = document.querySelector(".btn");

取得所有符合條件元素：

const buttons = document.querySelectorAll(".btn");

2. 修改內容

修改文字：

element.innerText = "新的內容";

修改 HTML：

element.innerHTML = "<strong>Hello DOM</strong>";

3. 修改樣式

element.style.color = "red";
element.style.fontSize = "20px";

4. 修改屬性

image.src = "logo.png";

link.href = "https://example.com";

5. 新增元素

建立節點：

const li = document.createElement("li");

li.innerText = "新項目";

加入到畫面：

document
  .querySelector("ul")
  .appendChild(li);

6. 刪除元素

element.remove();

DOM Event（事件處理）

DOM 不只是修改畫面，也能監聽使用者操作。

例如按鈕點擊事件：

const button =
  document.getElementById("btn");

button.addEventListener(
  "click",
  function () {
    alert("按鈕被點擊");
  }
);

常見事件：

事件（Event） 說明 常見用途
click 滑鼠點擊元素時觸發 按鈕操作、選單切換
dblclick 滑鼠雙擊元素時觸發 編輯模式切換
change 表單欄位值改變後觸發 下拉選單、核取方塊
input 輸入內容時即時觸發 搜尋建議、即時驗證
submit 表單送出時觸發 資料提交與驗證
keydown 鍵盤按下時觸發 快捷鍵功能
keyup 鍵盤放開時觸發 輸入完成檢查
mouseover 滑鼠移入元素時觸發 顯示提示資訊
mouseout 滑鼠移出元素時觸發 隱藏提示資訊
focus 元素取得焦點時觸發 輸入框高亮顯示
blur 元素失去焦點時觸發 表單欄位驗證
load 頁面或資源載入完成時觸發 初始化資料
resize 瀏覽器視窗大小改變時觸發 響應式版面調整
scroll 頁面捲動時觸發 無限滾動、回到頂部按鈕

實作範例：簡易計數器

HTML：

<h1 id="count">0</h1>

<button id="addBtn">
  +1
</button>

JavaScript：

let count = 0;

document
  .getElementById("addBtn")
  .addEventListener(
    "click",
    function () {
      count++;

      document.getElementById(
        "count"
      ).innerText = count;
    }
  );

當使用者點擊按鈕時：

  1. 觸發 click Event
  2. 修改 count 變數
  3. 更新 DOM
  4. 畫面重新顯示

DOM 的缺點

當網頁規模變大時，頻繁操作 DOM 可能造成效能問題。

例如：

for(let i=0;i<10000;i++){
  document.body.appendChild(
    document.createElement("div")
  );
}

每次修改都可能導致：

  • Reflow（重新排版）
  • Repaint（重新繪製）

因此大量 DOM 操作可能影響網頁效能。

現代框架如何改善 DOM 效能？

React 提出了 Virtual DOM 的概念。

流程如下：

資料變更
    ↓
Virtual DOM 更新
    ↓
Diff 比對
    ↓
只更新變動部分
    ↓
實際 DOM 更新

優點：

  • 減少直接操作 DOM
  • 提升大型應用效能
  • 更容易維護程式碼

Vue、Angular 等框架也採用了類似機制。

DOM 在 AI 時代還重要嗎？

答案是非常重要。

即使使用：

  • React
  • Vue
  • Angular
  • Svelte
  • Next.js

本質上仍然是在操作 DOM。

了解 DOM 可以幫助開發者：

  • 理解框架運作原理
  • 解決效能問題
  • 撰寫原生 JavaScript
  • 進行瀏覽器除錯

因此 DOM 仍然是前端工程師必備基礎知識。

結論

DOM（Document Object Model）是瀏覽器提供給 JavaScript 操作網頁的核心機制。

透過 DOM，開發者可以：

  • 讀取網頁內容
  • 修改 HTML
  • 控制 CSS
  • 處理事件
  • 動態更新畫面

雖然現代框架已經大幅降低直接操作 DOM 的需求，但理解 DOM 的運作方式，仍然是成為優秀前端工程師的重要基礎。

留言

張貼留言

熱門文章