2026-03-28JavaScript

DOM 操作#

DOM（Document Object Model，文件物件模型）是瀏覽器將 HTML 解析後產生的樹狀結構，JavaScript 可透過 DOM API 讀取或修改網頁內容。

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

選取元素#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 選取單一元素（回傳第一個符合的）
const title = document.querySelector("h1");
const btn = document.querySelector("#submit-btn");      // id
const card = document.querySelector(".card");           // class
const input = document.querySelector("input[type=text]"); // 屬性

// 選取多個元素（回傳 NodeList）
const items = document.querySelectorAll("li");
const cards = document.querySelectorAll(".card");

// 舊式方法（仍常見）
const el = document.getElementById("app");
const els = document.getElementsByClassName("item");

讀取與修改內容#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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

// 讀取 / 設定文字內容
console.log(el.textContent); // 純文字
el.textContent = "新標題";

// 讀取 / 設定 HTML 內容（可含標籤）
console.log(el.innerHTML);
el.innerHTML = "<strong>粗體標題</strong>";

// 設定輸入框的值
const input = document.querySelector("input");
console.log(input.value);
input.value = "預設文字";

修改樣式與 Class#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

// 直接修改樣式
box.style.color = "red";
box.style.backgroundColor = "#f0f0f0";
box.style.display = "none"; // 隱藏元素

// 操作 class（推薦）
box.classList.add("active");       // 加入
box.classList.remove("hidden");    // 移除
box.classList.toggle("selected");  // 切換（有則移除，無則加入）
box.classList.contains("active");  // 判斷是否有此 class

// 直接設定（會覆蓋所有 class）
box.className = "box active";

讀取與設定屬性#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const img = document.querySelector("img");

// 讀取屬性
console.log(img.getAttribute("src")); // 讀取 src
console.log(img.src);                 // 同上（部分屬性可直接存取）

// 設定屬性
img.setAttribute("alt", "圖片說明");
img.src = "new-image.jpg";

// 移除屬性
img.removeAttribute("disabled");

// data-* 自定屬性
// <div data-user-id="123" data-role="admin">
const div = document.querySelector("div");
console.log(div.dataset.userId); // "123"
console.log(div.dataset.role);   // "admin"

建立與插入元素#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// 建立元素
const newItem = document.createElement("li");
newItem.textContent = "新項目";
newItem.classList.add("list-item");

// 插入到父元素
const list = document.querySelector("ul");
list.appendChild(newItem);          // 加到末尾
list.prepend(newItem);              // 加到開頭

// 插入到特定位置
list.insertBefore(newItem, list.firstChild);

// insertAdjacentHTML — 快速插入 HTML 字串
list.insertAdjacentHTML("beforeend", "<li>快速插入</li>");
// 位置："beforebegin" | "afterbegin" | "beforeend" | "afterend"

移除元素#

1
2
3
4
5
6
7

const item = document.querySelector(".remove-me");

// 移除元素
item.remove();

// 移除子元素（舊式）
item.parentNode.removeChild(item);

遍歷 DOM#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

const el = document.querySelector("#parent");

// 子元素
console.log(el.children);           // HTMLCollection（只含元素節點）
console.log(el.firstElementChild);  // 第一個子元素
console.log(el.lastElementChild);   // 最後一個子元素

// 父元素
console.log(el.parentElement);

// 兄弟元素
console.log(el.previousElementSibling);
console.log(el.nextElementSibling);

// 遍歷所有 li
document.querySelectorAll("li").forEach(item => {
    item.style.color = "blue";
});

實際範例：動態清單#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html>
<body>
  <input id="input" type="text" placeholder="輸入項目">
  <button id="add-btn">新增</button>
  <ul id="list"></ul>

  <script>
    const input = document.querySelector("#input");
    const btn = document.querySelector("#add-btn");
    const list = document.querySelector("#list");

    btn.addEventListener("click", () => {
        const text = input.value.trim();
        if (!text) return;

        const li = document.createElement("li");
        li.textContent = text;

        // 新增刪除按鈕
        const del = document.createElement("button");
        del.textContent = "刪除";
        del.onclick = () => li.remove();

        li.appendChild(del);
        list.appendChild(li);
        input.value = "";
    });
  </script>
</body>
</html>

Reference#