DOM 操作

什麼是 DOM？

比喻：DOM 就像一棵樹 🌳

HTML 文件被瀏覽器解析成一棵樹狀結構， 每個標籤都是樹上的一個節點。 JavaScript 透過 DOM 操作這棵樹，改變網頁的內容和外觀。

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1
        ├── p
        └── div
            ├── span
            └── a

選取元素

// 用 ID 選取（回傳一個元素）
let title = document.getElementById("title");

// 用 CSS 選擇器選取（回傳第一個符合的）
let btn = document.querySelector(".btn-primary");
let nav = document.querySelector("nav > ul > li:first-child");

// 用 CSS 選擇器選取所有符合的（回傳 NodeList）
let items = document.querySelectorAll(".item");
// NodeList 可以用 forEach
items.forEach(item => console.log(item.textContent));

// 其他選取方式
let inputs = document.getElementsByClassName("form-input");  // HTMLCollection
let paragraphs = document.getElementsByTagName("p");          // HTMLCollection

修改內容

let el = document.querySelector("#title");

// textContent — 純文字
el.textContent = "新標題";            // ← 設定文字（安全，不解析 HTML）

// innerHTML — HTML 內容
el.innerHTML = "<strong>粗體標題</strong>"; // ← 設定 HTML（⚠️ 小心 XSS）

// ⚠️ XSS 風險！
let userInput = "<img src=x onerror=alert('hack')>";
el.innerHTML = userInput;              // ❌ 危險！會執行惡意程式碼
el.textContent = userInput;            // ✅ 安全！只顯示純文字

修改樣式

let box = document.querySelector(".box");

// 直接修改 style（行內樣式）
box.style.backgroundColor = "#ff0000";  // ← 注意：CSS 的 background-color
box.style.fontSize = "20px";            //         變成 JS 的 fontSize
box.style.display = "none";             // ← 隱藏

// 用 classList 操作 CSS class（推薦）
box.classList.add("active");             // ← 新增 class
box.classList.remove("active");          // ← 移除 class
box.classList.toggle("active");          // ← 有就移除，沒有就新增
box.classList.contains("active");        // ← 有沒有這個 class：true/false

修改屬性

let link = document.querySelector("a");

// getAttribute / setAttribute
link.getAttribute("href");              // ← 讀取 href 屬性
link.setAttribute("href", "https://example.com");  // ← 設定
link.removeAttribute("target");         // ← 移除

// data-* 自訂屬性
// <div data-user-id="123" data-role="admin">
let div = document.querySelector("div");
console.log(div.dataset.userId);       // ← "123"
console.log(div.dataset.role);         // ← "admin"
div.dataset.status = "active";         // ← 新增 data-status="active"

建立與刪除元素

// 建立新元素
let newDiv = document.createElement("div");      // ← 建立 <div>
newDiv.textContent = "我是新元素";
newDiv.classList.add("card");

// 插入到頁面
let container = document.querySelector("#container");
container.appendChild(newDiv);                    // ← 加到最後面
container.prepend(newDiv);                        // ← 加到最前面
container.insertBefore(newDiv, container.firstChild); // ← 指定位置前

// 刪除元素
let old = document.querySelector(".old-item");
old.remove();                                     // ← 直接移除自己
// 或
old.parentNode.removeChild(old);                  // ← 透過父元素移除

實用範例

// 動態建立清單
function renderList(items, containerId) {
    let container = document.getElementById(containerId);
    container.innerHTML = "";                     // 清空容器

    items.forEach(item => {
        let li = document.createElement("li");
        li.textContent = item;
        li.classList.add("list-item");
        container.appendChild(li);
    });
}

renderList(["React", "Vue", "Angular"], "framework-list");