跟著AI一起:從零打造一個互動式網站 Day15

網頁製作網頁排版網頁製作網頁 html

wqq 2025-10-05 23:17:40 ‧ 73 瀏覽

分享至

DOM 是什麼？

DOM（Document Object Model）是一種把 HTML 文件轉換成「樹狀結構」的模型。
簡單來說，瀏覽器會把你的網頁轉成一顆「樹」，讓 JavaScript 可以存取、修改任何元素。

例如：

<html>
  <body>
    <h1>Hello</h1>
    <p>Sunny 的鐵人賽</p>
  </body>
</html>

瀏覽器會轉成這樣的結構：

document
└── html
└── body
├── h1
└── p

JavaScript 可以透過 DOM API 把 <h1> 或 <p> 抓出來、改內容、改樣式。

常見的選取方法

getElementById()

用元素的 id 取得元素。

<h1 id="title">Hello</h1>

<script>
let el = document.getElementById("title");
console.log(el); // <h1 id="title">Hello</h1>
</script>

getElementsByClassName()

抓到的是「類陣列 (HTMLCollection)」。

<p class="note">第一段</p>
<p class="note">第二段</p>

<script>
let notes = document.getElementsByClassName("note");
console.log(notes[0].innerText); // 第一段
</script>

getElementsByTagName()

用標籤名稱選取。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
</ul>

<script>
let items = document.getElementsByTagName("li");
console.log(items.length); // 2
</script>

querySelector()

抓第一個符合的元素，用 CSS 選擇器。

<p class="note">第一段</p>
<p class="note">第二段</p>

<script>
let first = document.querySelector(".note");
console.log(first.innerText); // 第一段
</script>

querySelectorAll()

抓所有符合的元素，回傳 NodeList（可用 forEach）。

<p class="note">第一段</p>
<p class="note">第二段</p>

<script>
let allNotes = document.querySelectorAll(".note");
allNotes.forEach(n => console.log(n.innerText));
// 第一段
// 第二段
</script>

改內容與樣式

選到元素後，可以改文字、HTML、CSS：

<h1 id="title">原本的標題</h1>
<p id="desc">這是說明文字</p>

<script>
let title = document.getElementById("title");
let desc = document.getElementById("desc");

// 改文字
title.innerText = "Sunny 的網站";
desc.textContent = "更新後的說明";

// 改 HTML
desc.innerHTML = "<b>這是粗體說明</b>";

// 改樣式
title.style.color = "red";
title.style.fontSize = "30px";
</script>

🔹小練習

<h1 id="title">原本的標題</h1>
<button id="btn">改標題</button>

<script>
let btn = document.getElementById("btn");
let title = document.getElementById("title");

btn.addEventListener("click", () => {
  title.innerText = "Hello Sunny!";
  title.style.color = "blue";
});
</script>

👉 當按下按鈕，標題文字與顏色會被更新。