這篇開始進到跟網頁互動較密切相關的單元，我會學習DOM 跟常用的網頁設計指令。練的環境是 VS code (這篇文章寫如何安裝)，之前的環境是Colab，但Colab比較適合Python。
DOM（Document Object Model），文件物件模型
用 HTML 寫的DOM 是瀏覽器幫你把 網頁HTML 變成 JavaScript 能操作的物件。簡單來說，它把網頁想像成一棵「樹」，每個元素（像標題、段落、圖片、按鈕等）都是樹上的一個「節點」（node）。瀏覽器會把 HTML 轉成這種樹狀結構，讓程式（比如 JavaScript）可以輕鬆找到、修改或刪除網頁上的東西。
<div>、<p>，JS 會變成類似這種結構。假設你把一個網頁想像成一個學校的組織圖：- 整棵樹：整個網頁就像學校的組織圖，包含所有的人和部門。
- 節點：每個「人」或「部門」就是網頁裡的一個元素。例如：
<html>是校長，掌管一切。<body>是教務處，負責主要內容。<h1>是班級名稱，像是「3年17班」。<p>是班上的一個學生，像是「一段文字」。<img>是學校的宣傳照片。
- 操作：用 JavaScript 就像是學校的秘書，可以去改組織圖。比如：
- 想把班級名稱從「3年17班」改成「1年18班」？用 JavaScript 找到
<h1>節點，改它的內容。 - 想加一個新學生（一段文字）？可以在
<body>裡新增一個<p>節點。 - 想把照片換掉？找到
<img>節點，換成另一張圖的網址。
- 想把班級名稱從「3年17班」改成「1年18班」？用 JavaScript 找到
舉例來說，最原始的網頁長這樣：
<html>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是我的第一段文字</p>
<button>點我</button>
</body>
</html>
我想要用 DOM 讓他活起來，可以動態改變內容，比如：
- 點擊按鈕後顯示新訊息。
- 根據使用者輸入改變網頁樣子。
- 動態載入圖片或資料。
就會使用 document. 的函式包。例如：
// 找到 <h1> 並改文字
document.querySelector("h1").textContent = "改成新標題！";
// 點擊按鈕時，新增一段文字
document.querySelector("button").addEventListener("click", function() {
let newP = document.createElement("p");
newP.textContent = "新加的文字！";
document.body.appendChild(newP);
});
突然多了好多花花的指令，我們來看幾個常見的。
一... 就... addEventListener
給某個元素「掛上一個監聽器」，當某個事件發生時就執行你指定的函式（callback function），通常是使用者點擊按鈕網頁會出現其他互動。我自己的解讀是「一...就...」的文法。
語法說明：
element.addEventListener("事件名稱", callback函式);
"click"：點擊"mouseover"：滑鼠經過"keydown"：鍵盤按下"submit"：表單送出"change"：輸入框內容變動
實驗的檔案請看「這篇文章」
<button id="clickMe">點我！</button>
const btn = document.getElementById("clickMe");
btn.addEventListener("click", function () {
alert("你點到我啦！");
});
常見的「選取方法」怎麼用？實務上用在哪裡?
querySelector / querySelectorAll 在實務上很常用。
購物車功能：
getElementById("cart-count")
→ 顯示購物車有幾項商品。他的語法是 getElementById("一個ID")
🤔一定要用ID嗎？不能直接去取得變數嗎？
因為 JavaScript 是獨立執行在瀏覽器上的語言，它不會一開始就知道 HTML 裡有哪些元素，我們要自己用程式把它們「找出來」，這個找的動作就是：
const btn = document.getElementById("clickMe");
如果直接在 JS 寫
clickMe.addEventListener(...) // ❌ 這樣瀏覽器根本不知道 clickMe 是哪來的
優點是
- 可讀性好
btn.addEventListener()比document.getElementById("clickMe").addEventListener()更短、更易懂 - 可重複使用：可以多次用
btn，不用每次都重找那個元素 - 效能較好：只找一次元素、存在變數裡，比每次操作都重新找快很多（雖然在小網頁上差異不大，但在大型專案很重要）
小總結：「抓元素→存變數→加事件」
querySelectorAll(".add-to-cart")
→ 選取所有「加入購物車」按鈕，幫它們加監聽器（addEventListener）querySelector(".product-price")
→ 即時抓取每個商品的價格，加總到總額上
✅ 表單驗證：
getElementById("email")
→ 抓到 email 欄位，輸入錯誤時改變邊框顏色、提示訊息form.addEventListener("submit", e => { ... })
→ 攔截使用者送出前先檢查內容，避免送出不完整的資料
🎨 動態 UI (使用者介面) 改變：
- 點選不同主題按鈕，透過
querySelectorAll(".theme-btn")一次掛事件 - 換背景色、字型大小（透過
.style或加 class）
以上就是簡單的分享，英文的學習資源還在整理中，可能要800年才會好吧哈哈哈。
使用 VS Code 和 Live Server 建立簡單網頁的教學
至於 event bubbling, event delegation, stopPropagation 我會另外再寫筆記3.5 篇練習~
