瀏覽器眼中的網頁，是一棵樹
瀏覽器不是把整張畫面當成一張圖，而是把每個按鈕、圖片、文字都當成獨立的「元素」，而且每個元素都知道自己被誰包著、又包著誰。把這種包覆關係畫出來，就是下面這棵樹。它有個正式名字：DOM Tree（文件物件模型樹），是瀏覽器理解和呈現網頁的核心機制；之後程式要讀取或修改畫面上的任何東西，都是透過這棵樹。
vibe-wear.com
VIBEWEAR
$390
$420
$450
$520
這棵樹的兩個關鍵性質
這棵樹有兩個性質：元素有父子之分，外層是父、內層是子；掛在父層的規則，會影響整群子元素。點右邊兩顆按鈕切換，看這兩個性質在樹上各自長什麼樣。
頁面
導覽列
商品列表父
商品卡
子商品卡
子商品列表、商品卡，每一塊都是一個元素；元素可以包著元素，就像盒子裡裝盒子。商品列表包著商品卡，列表就是「父」、卡片是「子」，這樣的上下關係連起來，就是一棵樹。
每一塊畫面都是節點
畫面上的每一塊，在 DOM Tree 上都有一個對應的「節點」；想改畫面的哪裡，其實就是在改樹上的那個節點。你之後請 AI 改東西，它也是在這棵樹上一層層搜尋、找到那個元素才動手的。把游標移到左邊購物頁的任何一塊，看它對應到右邊樹上的哪個節點。
vibe-wear.com
VIBEWEAR
熱門商品
純棉白 TEE
$390
石墨黑 TEE
$420
瀏覽器眼中的結構（示意）
頁面 {
導覽列{ Logo, 搜尋, 購物車 }
商品列表 {
商品卡{ 圖片, 名稱, 價格 }
商品卡{ 圖片, 名稱, 價格 }
}
頁尾導覽{ 首頁, 搜尋, 收藏, 我 }
}
樣式怎麼套到這棵樹上
樣式不是塗在整個畫面上的，而是掛在樹的某個節點上，並且會沿著樹往下作用：掛在哪一層，就影響那一層以下的整棵子樹。深色模式能一鍵讓整個畫面變色，就是把深色樣式掛在最上面的「樹根」節點：有些樣式（像文字顏色）會自動往下傳，有些是子節點看到上層切了深色、跟著換上自己的深色版。
vibe-wear.com
VIBEWEAR
★ 熱銷人氣
純棉白 TEE
$390
加入購物車
任務：點樹上的節點，把深色掛上去
掛哪個節點、哪個範圍就變深，手機畫面會同步變化；再點一次同一顆＝取消。
同一份深色樣式，掛的節點不同、影響範圍就不同。點右邊樹上的任何節點，把深色掛上去比較看看。
容器決定裡面的排版規則
不只顏色這類外觀，排版也是掛在父層、往下管整群子元素的規則：容器（外層的那個盒子）不只是「裝東西」，它還決定了裡面的元素怎麼排。切換下面兩種狀態，比較「有容器」和「移除容器」的差別。
vibe-wear.com
VIBEWEAR
商品列表容器
純棉白 TEE
$390
石墨黑 TEE
$420
DOM 樹結構
頁面
├─ 導覽列
├─ 商品列表容器[grid 2欄]
├─ 商品卡 1
└─ 商品卡 2
└─ 頁尾導覽
商品列表容器定了「排成 2 欄」的規則，裡面的卡片跟著走。所以想把卡片改成 3 欄，要改的是容器的規則，不是一張張卡片。
重點回顧
這一課我們搞懂了瀏覽器眼中的網頁長什麼樣。帶走這兩個重點：
- 1網頁是一棵樹，名字叫 DOM Tree瀏覽器不是把網頁當一張圖：元素之間有父子層級，整個網頁就是一棵樹。想改哪一塊，先找到它對應的節點；找錯層，效果就會跑到別的地方去。
- 2掛在父層的規則，會影響整群子元素容器決定子元素怎麼排、部分樣式沿著樹往下流，深色模式一鍵全變就是這樣來的。
隨堂檢測
你讓 AI「把導覽列背景改成深灰色」，刷新後整個頁面背景都變深了，連商品卡區域也受影響。但你明明只說了導覽列，為什麼範圍這麼大？
想想 DOM Tree 的層級，導覽列是哪個節點的子元素？背景色是從哪裡設的才會影響這麼大範圍？