初級 免費 ⏱ 15:00
11-1 網頁的操作者：DOM 選擇器與操作
學習如何直接控制網頁內容。掌握現代 DOM 選擇器、屬性操作，以及動態建立元素的技術。
11-1 網頁的操作者：DOM 選擇器與操作
👋 **老師的話 (Script)**:
"不管你用什麼框架，網頁最終顯示的都是 DOM (Document Object Model)。
以前我們要寫長長的 `document.getElementById`，現在我們有更強大的工具。
這一節，我們要學會如何像上帝一樣，在瀏覽器裡無中生有， 或是把一個難看的按鈕變成精美的導航欄。“
1. 現代選擇器：querySelectorAll
不要再記五種不同的選取方法了。在 2026 年，我們 99% 的時間都在用這兩個：
// 選一個
const header = document.querySelector(".main-header");
// 選全部
const buttons = document.querySelectorAll("button.submit");
// 回傳的是一個 NodeList，可以用 forEach 遍歷2. 修改內容與樣式
const el = document.querySelector("#app");
el.textContent = "Hello 2026!"; // 修改純文字
el.innerHTML = "<strong>亮點</strong>"; // 修改 HTML (小心 XSS)
// 操作樣式 (不建議直接改 style，建議改 class)
el.classList.add("active");
el.classList.toggle("hidden");3. 動態建立元素
const div = document.createElement("div");
div.className = "card";
div.textContent = "我是新來的";
document.body.appendChild(div); // 塞到最後面效能小技巧：Fragment
如果你要一次塞 100 個元素，不要跑 100 次 appendChild。
先塞進 DocumentFragment，再一次塞進 body。
🧪 Lab 25: 動態列表機
寫一個迴圈，動態產生 5 個