掌控畫面！DOM 操作 (Day21)

2025 iThome 鐵人賽

DAY 21

佛心分享-IT 人自學之術

30 天體驗：從程式菜鳥到前端新手工程師系列第 21 篇

17th鐵人賽

tingisgood

2025-10-05 23:10:15

11 瀏覽

分享至

前幾天我們已經學會讓網頁有反應（事件、輸入、點擊），
但今天要更進一步 —— 學會「直接操控畫面元素」！

DOM（Document Object Model）就是 JavaScript 與網頁之間的橋樑。
只要掌握它，就能改文字、換圖片、改顏色、改結構，真正掌控整個網頁。

1.什麼是 DOM？

DOM 是瀏覽器在讀取 HTML 後建立的一棵「文件樹」。
每個標籤都是一個節點 (node)，像這樣：

<html>
 └─ <body>
     ├─ <h1>
     └─ <p>

JavaScript 就是透過這棵樹，找到節點 → 改內容、改樣式、甚至新增刪除它。

2.選取元素的方法

getElementById

document.getElementById("title");

querySelector（最推薦）

document.querySelector("#title");   // 用 ID
document.querySelector(".btn");     // 用 class
document.querySelector("p");        // 用標籤

querySelectorAll

可選取多個元素，會回傳「陣列型態」集合。

document.querySelectorAll("li");

3.改內容

(1) 文字內容

<h2 id="title">原本的文字</h2>

<script>
  const title = document.getElementById("title");
  title.textContent = "文字被改成這樣啦！😎";
</script>

(2) HTML 結構

<p id="info"></p>

<script>
  const info = document.getElementById("info");
  info.innerHTML = "<strong>這段字是粗體的！</strong>";
</script>

4.改樣式

<h2 id="title">改顏色試試看 🎨</h2>

<script>
  const title = document.getElementById("title");
  title.style.color = "deepskyblue";
  title.style.fontSize = "28px";
  title.style.background = "lightyellow";
</script>

5.切換 class（最常見的互動手法）

<style>
  .highlight {
    color: white;
    background: tomato;
    padding: 5px 10px;
    border-radius: 8px;
  }
</style>

<h2 id="text">點我切換樣式</h2>

<script>
  const text = document.getElementById("text");
  text.addEventListener("click", () => {
    text.classList.toggle("highlight");
  });
</script>

6.新增與刪除元素

(1) 新增

<ul id="list"></ul>

<script>
  const list = document.getElementById("list");
  const newItem = document.createElement("li");
  newItem.textContent = "這是新項目 🆕";
  list.appendChild(newItem);
</script>

(2) 刪除

newItem.remove();  // 直接移除

7.改屬性

改圖片

<img id="pic" src="img1.jpg" width="200">
<button id="change">換圖</button>

<script>
  const pic = document.getElementById("pic");
  const btn = document.getElementById("change");

  btn.addEventListener("click", () => {
    pic.src = pic.src.includes("img1.jpg") ? "img2.jpg" : "img1.jpg";
  });
</script>

今日實戰

(1) 點擊新增留言

<input id="message" placeholder="輸入留言">
<button id="addBtn">新增留言</button>
<ul id="list"></ul>

<script>
  const input = document.getElementById("message");
  const addBtn = document.getElementById("addBtn");
  const list = document.getElementById("list");

  addBtn.addEventListener("click", () => {
    if (input.value === "") return;
    const li = document.createElement("li");
    li.textContent = input.value;
    list.appendChild(li);
    input.value = "";
  });
</script>

(2) 切換主題按鈕

<style>
  body.dark {
    background: #111;
    color: white;
    transition: 0.3s;
  }
</style>

<button id="themeBtn">切換主題 🌙</button>

<script>
  const themeBtn = document.getElementById("themeBtn");
  themeBtn.addEventListener("click", () => {
    document.body.classList.toggle("dark");
    themeBtn.textContent =
      document.body.classList.contains("dark") ? "切換主題 ☀️" : "切換主題 🌙";
  });
</script>