本文同步分享於個人部落格：Liwen Chiou | Digital Architect & Full-Stack Engineer

📜 這裡的修煉規則：

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。
修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。
成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

「導師，我已經蓋好這座城市（HTML）了，但我該怎麼抓到躲在城堡三樓的那個小怪物，叫他改名成『勇者之王』？」

我指著遠方說：「冒險者，身為專業的尋寶人，你必須學會『座標精準定位』。這不是胡亂射箭，而是順著這棵名叫 DOM (Document Object Model) 的大樹，找到地圖上唯一的標記。如果你抓錯了人，你的咒語就會噴發出 null 的霧氣，讓你當場卡死在副本門口。」今天，我們要學會如何在萬千元素中，一眼釘住你的目標。

💡 【導師講義：底層真相探究】

1. HTML 樹狀結構地圖 (The DOM Tree)

網頁裡的所有標籤（<div>, <p>, <h1>），在 JavaScript 的眼中其實都長得像一棵倒過來的「樹」。根部是 document，每條分枝都是一層巢狀關係。

🛠️ 定位術：QuerySelector 兩大傳送門

1. document.querySelector()：單點偵錯儀
   行為：從起點向下掃描，一旦發現「第一個」符合條件的目標，就立刻停止並回傳。
   回傳值：一個活生生的 Element 物件（沒找到則回傳 null）。
2. document.querySelectorAll()：全場掃描儀
   行為：掃描整棵樹，把所有符合條件的人通通抓起來。
   回傳值：一個 NodeList（類陣列清單）。你必須用 forEach 巡邏一遍，才能對裡面的成員逐一下令。

2. 定位基準對照表

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：精準定位術

❌ 冒險學弟：使用舊型號羅盤 (getElementById)

• 負能量評級：🔴 語法冗長 / 🔴 彈性極低

const name = document.getElementById("nickname");
// 囉嗦、難記，且無法使用複雜選取器

✅ 勇者學長：全能的高效定位 (querySelector)

• 利潤評級：🟢 統一語法 / 🟢 支援 CSS 複雜選取

// 1. 抓取唯一目標 (ID 用 #)
const heroName = document.querySelector("#nickname");
heroName.textContent = "辛梅爾";

// 2. 抓取一群目標 (Class 用 .) 並批量處理
const monsters = document.querySelectorAll(".monster");
monsters.forEach((m) => m.classList.add("is-hidden"));

3. 邏輯流向圖解

導師的圖解心法： DOM 樹就像是一座 「地下城的每一層地圖」。querySelector 就是你的精準掃描儀。你可以從最上面的 #castle 一層層往下掃描，直到你鎖定那個帶著寶貝的 .monster。

🏰 【勇者精英課：邁向職人的進階架構】

.dataset：標籤隱藏的公事包

抓到了元素，我們還需要能讀取它身上的隱藏資訊。
職人們最推薦使用 data-* 屬性來儲存與 HTML 標籤關聯的資料（例如資料庫 ID）。

<div class="npc" data-id="99" data-job="mentor"></div>

const npc = document.querySelector(".npc");
console.log(npc.dataset.id); // "99"

這比直接把 ID 寫在 Class 裡乾淨得多，也更符合現代資料與邏輯分離的架構。

🛖 【營火叮嚀：導師的經驗談】

孩子，現代公會的標配是 querySelector。它就像萬能定位儀，只要你懂一點 CSS 選擇器的邏輯，全場沒有你抓不到的標靶。學會這招，你就拿到了參與「DOM 實戰」的入場券。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，而是你證明自我的舞台。去吧，公會的英雄榜在等著你的戰報。

📝 【夥伴筆記：今日修煉精華】

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

• querySelector：抓第一個目標。
• querySelectorAll：擴散掃描，帶回一疊 NodeList。
• textContent：操作標籤台詞。
• value：獲取輸入框裡的機密數值。

🎯 【實戰演武場】

• 📜 本日實戰任務：DOM 樹的精準抓取術 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：捕獲 NPC 鑑定 (成就感發掘)：
     • 1. 今天第一次在 Consle 中成功印出瀏覽器上的標題時，有沒有一種「代碼終於與世界連接」的感覺？
   • 冒險者：名單與陣列之謎 (理性挑戰)：[⚡ 觀念辨析]
     • 1. NodeList 雖然長得像陣列，但它能直接施展 map 加工術嗎？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

📚 【圖書館卷軸：延伸學習】

• MDN 官方文獻： Document.querySelector() 詳解