Day 9: 操作網頁元素：認識 DOM

2025 iThome 鐵人賽

DAY 10

Security

跨出第一步:D 從0到0.1的Web security 系列第 10 篇

17th鐵人賽

cloudyouo

2025-09-24 23:38:21

14 瀏覽

分享至

這三天我們簡單的認識了HTML,CSS,JavaScript，接下來我們來討論一個重要的要素

什麼是 DOM？
DOM 的全名是 Document Object Model，中文叫做「文件物件模型」。

它不是一種程式語言，而是一個由 W3C (World Wide Web Consortium) 制定的標準介面 (API)。這個介面的作用，是將一份 HTML 或 XML 文件「模型化」，把它變成一個由物件組成的樹狀結構。

簡單來說，當瀏覽器載入一個 HTML 網頁時，它會在記憶體中根據這份 HTML 文件的結構，建立一個對應的、可以被程式語言（主要是 JavaScript）存取和操作的「物件表示法」。這個物件化的樹狀結構，就是 DOM。

想像一下你的 HTML 程式碼是一棟房子的建築藍圖，而 DOM 就是瀏覽器根據這張藍圖在腦中（記憶體中）實際建立出來的、可互動的、立體的房子模型。JavaScript 則像是可以進入這棟房子模型，任意移動家具、改變牆壁顏色、開關門窗的魔法師。

DOM 的樹狀結構
DOM 最核心的概念就是它的「樹狀結構」(Tree Structure)。HTML 文件中的每一個標籤、每一段文字、每一個屬性，在 DOM 中都會被轉換成一個「節點」(Node)。

這些節點之間有著像家族樹一樣的層級關係：

根節點 (Root Node): 整棵樹的最頂層，通常是一個 html 標籤。

父節點 (Parent Node): 一個節點的上一層節點。

子節點 (Child Node): 一個節點的下一層節點。

兄弟節點 (Sibling Node): 擁有相同父節點的節點。

我們來看一個範例

<!DOCTYPE html>
<html>
  <head>
    <title>這是一個網頁</title>
  </head>
  <body>
    <h1>網頁的一個標題</h1>
    <p>一些文字內容。</p>
  </body>
</html>

這個東西經過瀏覽器之後產生的Tree

[Document]
              |
            [html]
              |
      +-------+-------+
      |               |
    [head]            [body]
      |               |
      |       +-------+-------+
      |       |               |
    [title]  [h1]             [p]
      |       |               |
      |       |               |
["這是一個網頁"] ["網頁的一個標題"]  ["一些文字內容。"]

在這個結構中：

html 是 head 和 body 的父節點。

head 和 body 是 html 的子節點，同時它們也是兄弟節點。

h1 元素內部的那段文字 "一個標題"，也是一個節點，稱為文字節點 (Text Node)，它是 h1 節點的子節點。

再來我們看一下JavaScript 如何透過 DOM 與 HTML 互動的

JavaScript 之所以能動態修改網頁，正是因為它操作的是 DOM，而不是 HTML 原始碼檔案。當 JavaScript 修改了 DOM 中的某個物件（節點）時，瀏覽器會立即根據這個新的 DOM 結構，自動「重新繪製」(re-render) 網頁的畫面，使用者就能看到即時的變化。

JavaScript 提供了許多內建的方法來對 DOM 進行增、刪、查、改 (CRUD)：

查詢 (Read / Query) 節點:
這是最基本的操作，先找到你想要控制的目標元素。

document.getElementById('some-id'): 透過 id 屬性選取唯一的元素。

document.querySelector('some-selector'): 透過 CSS 選擇器（如 .class, #id, tag）選取第一個符合條件的元素。

document.querySelectorAll('some-selector'): 透過 CSS 選擇器選取所有符合條件的元素，並返回一個集合。

修改 (Update) 節點:
找到元素後，你可以改變它的內容、樣式或屬性。

element.textContent = '新的文字內容': 修改元素的文字。

element.innerHTML = ' span新的HTML內容 span': 修改元素內部的 HTML 結構。

element.style.color = 'red': 修改元素的 CSS 樣式。

element.setAttribute('href', 'https://new-link.com'): 設定或修改元素的屬性。

新增 (Create) 與插入節點:
你可以動態建立新的 HTML 元素並將它們加入到網頁中。

document.createElement('div'): 建立一個新的 div 元素。

parentElement.appendChild(newChildElement): 將一個新元素作為子元素，插入到父元素的最後面。

刪除 (Delete) 節點:
移除不再需要的元素。

parentElement.removeChild(childElement): 從父元素中移除指定的子元素。

element.remove(): (較新的方法) 直接將該元素從 DOM 中移除。

所以呢我們總結一下，當我們說「用 JavaScript 改變網頁內容」時，其實更精確的說法其實是「用 JavaScript 操作 DOM，瀏覽器再根據 DOM 的變化來更新畫面」。希望這樣各位會更了解網站是怎麼運做的，再來我們會簡單寮一個小的主題，叫做同源政策(Same origin policy)