[DAY5] DOM 是什麼？

2025 iThome 鐵人賽

DAY 5

Modern Web

17th鐵人賽 dom

166 瀏覽

DOM是什麼？

DOM（Document Object Model），是一種將 HTML / XML 裡面有很多的標籤和內容，把他轉換成一個樹狀的資料結構

大概像這樣👇

圖片上也標示出DOM上的Node結構

（這個是我們常用的HTML DOM）

上面的圖其實就是這樣的程式碼👇

<!DOCTYPE html>
<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <h1>A heading</h1>
    <a href="">Link Text</p>
  </body>
</html>

DOM提供DOM API給 JavaScript 能夠動態讀取、修改、刪除、插入文件中的內容與結構

如下面的方法：

// 取得元素
const title = document.getElementById('title');

// 修改文字
title.textContent = 'Hello DOM';

// 加上 class
title.classList.add('highlight');

這些 API 都是瀏覽器提供的，為 DOM 原生方法 / DOM API

先附上流程圖

操作 DOM API 常常會引起瀏覽器的重排（reflow）或重繪（repaint），而影響頁面效能

重排（reflow）與重繪（repaint）是什麼？

重排（reflow）：重新計算元素的位置與大小
- 當網頁中某個元素的位置與大小改變，瀏覽器會重新計算整個**渲染樹（Render Tree）**來排版
- 會觸發 Reflow 的操作例子：
  - 改變元素的尺寸（width, height）
  - 改變位置（top, left、新增或刪除元素）
  - 改變盒模型屬性（如 margin, padding, border）
  - 修改 DOM 結構（例如 appendChild(), removeChild()）
  - 改變字體大小（font-size）
  - 使用 JavaScript 調用 offsetTop, clientHeight 等會強制同步計算 layout 的屬性
- 成本高，消耗效能高
**重繪（repaint）：重新繪製元素的樣式（**顏色、邊框等）
- 當網頁中某個元素的顏色改變，重新填色繪製（不需重新排版）
- 會觸發 Repaint 的例子：
  - 改變 color
  - 改變 background-color
  - 改變 visibility
  - 改變 box-shadow
- 成本相對reflow低，消耗效能較低，但也是有消耗到

要如何提升效能？

DOM其實只是一個總稱，還有很多的DOM，例如CSSOM、SVGDOM、Virtual DOM等，它們是針對不同文件類型的專用 DOM

我稍微介紹一下幾個常見的DOM

CSSOM (CSS Object Model）
- 是瀏覽器解析 CSS 時建立的資料結構，Node為每個選擇器對應的樣式與規則
Virtual DOM
- 是 React、Vue 等框架引入的一個概念
- 用 JS 建立一個虛擬的 DOM Tree，當每次畫面或資料更新時會先去對比前後差異（Diff Algorithm），如果有變化，只操作實際需要更新的 DOM 部分
- 這樣降低頻繁操作 DOM 的次數，避免不必要的 Reflow、Repaint