# DOM 元素調查作業

## 概覽

現在你已經親身體驗了 DOM 操作的威力，是時候探索更廣泛的 DOM 介面世界。此作業將加深你對不同網頁技術如何與 DOM 互動的理解，而不僅僅是拖曳元素。

## 學習目標

完成此作業後，你將能夠：
- **研究** 並深入了解特定的 DOM 介面
- **分析** 實際應用中的 DOM 操作實現
- **連結** 理論概念與實務應用
- **培養** 技術文件撰寫與分析能力

## 指示

### 第一步：選擇你的 DOM 介面

造訪 MDN 的完整 [DOM 介面列表](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)，並選擇一個你感興趣的介面。建議從以下類別中挑選，以豐富學習內容：

**初學者友善選項：**
- `Element.classList` - 動態管理 CSS 類別
- `Document.querySelector()` - 進階元素選取
- `Element.addEventListener()` - 指標事件以外的事件處理
- `Window.localStorage` - 用戶端資料儲存

**中級挑戰：**
- `Intersection Observer API` - 偵測元素可見性
- `MutationObserver` - 監視 DOM 變化
- `Drag and Drop API` - 指標拖曳替代方案
- `Geolocation API` - 取得用戶位置

**進階探索：**
- `Web Components` - 自訂元素與 Shadow DOM
- `Canvas API` - 程式化繪圖
- `Web Workers` - 背景處理
- `Service Workers` - 離線功能

### 第二步：研究並撰寫文件

撰寫一份 300-500 字的完整分析內容，包含：

#### 技術概述
- **定義** 你所選介面是什麼，並以清楚且初學者友善的語言說明
- **說明** 其主要方法、屬性或事件
- **描述** 該介面設計用來解決的問題類型

#### 實際應用
- **尋找** 一個使用該介面的網站（檢查原始碼或搜尋範例）
- **記錄** 具體的實現方式，若可能附上程式碼片段
- **分析** 為什麼開發者會採用這種方案
- **解釋** 它如何提升使用者體驗

#### 實務應用
- **比較** 你選的介面與我們在 terrarium 專案中使用的方法
- **建議** 這個介面如何增強或擴展 terrarium 功能
- **指出** 其他適合使用此介面的項目

### 第三步：程式碼範例

包含一個簡單且可執行的程式碼範例，展現你的介面實際運作。此程式碼應該：
- **具功能性** — 測試後可正確執行
- **有註解** — 解釋各部分功能
- **相關性** — 與實際使用案例相關
- **適合初學者** — 容易被學習網頁開發的人理解

## 繳交格式

請使用清楚的標題結構來安排你的提交內容：

```markdown
# [Interface Name] DOM Investigation

## What It Does
[Technical overview]

## Real-World Example
[Website analysis and implementation details]

## Code Demonstration
[Your working example with comments]

## Reflection
[How this connects to our terrarium project and future applications]
```

## 評分標準

| 評分準則 | 優異 (A) | 精熟 (B) | 發展中 (C) | 需改進 (D) |
|----------|-----------|----------|------------|------------|
| **技術理解** | 展現深刻理解，說明精準且用詞恰當 | 展示紮實理解，多數說明準確 | 基本理解，有部分誤解 | 理解不足，錯誤明顯 |
| **實際分析** | 定位且徹底分析真實案例並具體說明 | 找到實例且分析一定程度充分 | 找到案例但分析較淺 | 實體連結不清或錯誤 |
| **程式碼範例** | 工作正常且註解清晰，明確演示介面 | 功能正常且有適當註解 | 程式有效，但說明不足 | 程式有錯誤或解釋差 |
| **文筆品質** | 文字清晰且吸引人，結構完善且具技術溝通能力 | 結構良好且技術寫作佳 | 結構與清晰度尚可 | 結構鬆散或表達不清 |
| **批判性思考** | 深刻連結概念，提出創新應用建議 | 有分析思考並相關連結 | 有部分分析但不夠深入 | 缺乏批判性思考跡象 |

## 成功秘訣

**研究策略：**
- **從** MDN 文件開始，取得權威資訊
- **尋找** GitHub 或 CodePen 的程式碼範例
- **利用** 瀏覽器開發工具檢查熱門網站
- **觀看** 教學影片以獲得視覺說明

**寫作指導：**
- **用** 自己的話說明，不要照抄文件
- **包含** 具體範例及程式碼片段
- **用** 教學的語氣解釋技術概念
- **將** 介面與更廣泛的網頁開發概念連結

**程式碼範例點子：**
- **製作** 展示介面主要功能的簡單示範
- **延伸** 我們 terrarium 專案相關的概念
- **重點** 放在功能性而非視覺設計
- **測試** 程式碼，確保可正常執行

## 繳交截止日

[在此插入截止日期]

## 有問題嗎？

如需釐清任何相關問題，歡迎隨時詢問！本次調查將深化你對 DOM 如何支援日常網頁互動體驗的理解。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：  
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 協助翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->