在前幾天，我們學會了 JavaScript 的變數、條件判斷以及收納資料的陣列與物件。但此時你心裡可能會冒出一個大問號：「這些變數跟資料，到底要怎麼跟我們的網頁畫面（HTML/CSS）產生連結啊？」

今天，我們就要來解開前端互動的終極秘密武器——DOM（Document Object Model，文件物件模型）！

什麼是 DOM？把網頁視為一座「家族樹狀圖

當瀏覽器把我們的 HTML 檔案讀進來時，它會在記憶體裡面把每一個標籤（<div>、<h1>、<p>）轉換成一個個像樹枝一樣的物件。這整棵樹，就叫做 DOM。

如果用設計師的觀點來理解：

• HTML 檔案就像是你在 Figma 裡畫好的一張靜態圖層稿。
• DOM 就像是 Figma 讓你可以用程式去讀取、選取、甚至隨時修改每一個圖層屬性的「動態控制面板」。
  有了 DOM 之後，JavaScript 就不再只是自己在那邊算數字或判斷邏輯了，它有了「雙手」，可以直接去抓取、修改網頁上的任何一個元素！

怎麼在 JavaScript 裡「抓到」網頁元素？

想要操控畫面，第一步當然是「選中目標」。在 JS 裡，我們最常用這兩個超強的抓取指令：

1. document.querySelector()（抓取第一個符合的元素）

• 就像你在 Figma 裡點選某個特定的圖層。
• 範例：const myTitle = document.querySelector('h1');（抓取網頁的第一個標題）。

2. document.querySelectorAll()（抓取所有符合的元素）

• 就像框選了一整排相同的元件清單。

抓到之後可以幹嘛？動態改變畫面內容！

當你用 querySelector 把元素抓到變數裡後，就可以為所欲為地修改它的屬性或文字:

// 1. 先把網頁上的標題抓下來
const mainTitle = document.querySelector('h1');

// 2. 用 JavaScript 動態把上面的文字改掉！
mainTitle.textContent = "孫小豬的 30 天前端修煉已完成！";

// 3. 甚至還可以動態幫它加上 CSS 樣式
mainTitle.style.color = "#ff6b6b";
mainTitle.style.fontSize = "32px";

本來寫死的標題，現在只要透過 JavaScript 一句話，網頁上的文字跟顏色就直接變了！

今日小結

今天我們認識了 DOM 樹狀結構，學會了怎麼用 JavaScript 去「抓取」並「修改」網頁上的 HTML 元素。

既然我們已經學會怎麼動態操控畫面了，明天我們要來進一步解鎖：當使用者點擊滑鼠、輸入文字時，網頁該怎麼即時做出反應？——也就是「事件監聽（Event Listener）」！