跳至主要內容

DOM 操作與事件處理

Jia-Yin2025年3月11日大约 3 分鐘coursefrontendweb

📌 學習目標
✅ 了解如何使用 JavaScript
✅ 修改 HTML 內容與屬性
✅ 監聽使用者行為（點擊、鍵盤輸入）
✅ 了解事件委派與事件冒泡

教學錄影

在 HTML 中使用 JS

內嵌 JavaScript（Inline JavaScript）

直接將 JavaScript 程式碼寫在 HTML 標籤的 事件屬性（如 onclick）中。 適合簡單的事件處理，但不利於程式碼維護。

📌 範例

<button onclick="alert('你好，JavaScript！')">點我</button>

📌 缺點：

難以維護：當 JavaScript 增加時，HTML 會變得混亂。

不建議使用：現代開發通常使用內部或外部 JavaScript 來管理事件。

寫在 HTML 文件的 <body> 或 <head> 內部

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title>內部 JavaScript</title>
    <script>
      function sayHello() {
        alert("你好，JavaScript！")
      }
    </script>
  </head>
  <body>
    <button onclick="sayHello()">點我</button>
  </body>
</html>

外部 JavaScript 檔案

📌 範例：

🔹 index.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title>外部 JavaScript</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1 id="title">Hello!</h1>
  </body>
</html>

PS: 因為 script.js 載入執行後，接下來才做元素的渲染，因此 id 為 title 的 h1 元素並不會改變內容。但如果將 <script src="script.js"></script> 移到 h1 元素後面，就會看到內容被改成 'JavaScript 來了！'

🔹 script.js

document.querySelector("#title").innerText = "JavaScript 來了！"

✅ 建議使用外部 JavaScript，讓程式碼與 HTML 結構分離，提高可讀性與維護性！

選取 HTML 元素

JavaScript 可以透過 DOM（文件物件模型） 操控 HTML 元素。

🔹 常見的選取方法：

方法說明
document.getElementById("id名")選取單一元素（透過 id）
document.querySelector("CSS選擇器")選取符合的第一個元素
document.querySelectorAll("CSS選擇器")選取符合的所有元素（回傳 NodeList）

📌 範例：選取 HTML 元素

<h1 id="title">Hello, JavaScript!</h1>
<button id="btn">點我</button>

<script>
  let title = document.getElementById("title")
  let button = document.querySelector("#btn")

  console.log(title.innerText) // 印出 h1 的內容
</script>

🎯 練習

  1. 建立一個 HTML 檔案，選取 <p> 標籤並印出內容。
  2. 嘗試使用 querySelectorAll() 選取多個 <li> 並用迴圈印出來。

修改 HTML 內容與屬性

🔹 修改 HTML 內容：

方法說明
element.innerText修改純文字內容
element.innerHTML修改 HTML 內容（可包含標籤）

📌 範例：修改 innerText

<h1 id="title">Hello</h1>
<button onclick="changeText()">更改文字</button>

<script>
  function changeText() {
    document.getElementById("title").innerText = "你好，JavaScript！"
  }
</script>

🎯 練習

  1. 建立一個按鈕，點擊後將 <p> 內的內容改為 "這是新的內容！"。
  2. 使用 innerHTML 在 div 裡新增一個 <strong>加粗的文字</strong>。

事件監聽函式

JavaScript 允許監聽使用者的行為，例如：

  • 點擊 (click)
  • 鍵盤按下 (keydown)
  • 輸入 (input)

🔹 監聽 click 事件

<button id="btn">點我</button>

<script>
  document.querySelector("#btn").addEventListener("click", function () {
    alert("你按了按鈕！")
  })
</script>

🔹 事件標的 (event.target)

<ul id="list">
  <li>項目 1</li>
  <li>項目 2</li>
  <li>項目 3</li>
</ul>

<script>
  document.querySelector("#list").addEventListener("click", function (event) {
    alert("你點擊了：" + event.target.innerText)
  })
</script>

🎯 練習

點擊 <ul> 內的 <li>，顯示點擊的項目內容。

DOM 操作：實際應用範例

修改 HTML 內容

document.querySelector("h1").innerText = "JavaScript 超好玩!"

事件監聽

<button id="myButton">點我一下</button>
<script>
  document.querySelector("#myButton").addEventListener("click", function () {
    alert("你按下了按鈕！")
  })
</script>

互動範例

💡 設計一個簡單的 HTML 頁面，包含：

  • 一個 <input> 讓使用者輸入名字
  • 一個按鈕，點擊後顯示「你好，(名字)！」

📌 範例程式碼

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <title>互動式 JavaScript</title>
  </head>
  <body>
    <input type="text" id="nameInput" placeholder="輸入你的名字" />
    <button id="sayHello">打招呼</button>
    <h2 id="greeting"></h2>

    <script>
      document
        .querySelector("#sayHello")
        .addEventListener("click", function () {
          let name = document.querySelector("#nameInput").value
          document.querySelector("#greeting").innerText = "你好，" + name + "!"
        })
    </script>
  </body>
</html>

🎯 動手實作練習

背景顏色切換：按按鈕切換背景顏色。

Copyright © 2025 Jia-Yin