<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
  "translation_date": "2025-10-22T22:45:09+00:00",
  "source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
  "language_code": "mo"
}
-->
# 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 字），包括：

#### 技術概述
- **定義**您選擇的接口的功能，使用清晰且易於理解的語言
- **解釋**它提供的主要方法、屬性或事件
- **描述**它旨在解決的問題類型

#### 實際應用分析
- **尋找**一個使用您選擇的接口的網站（檢查代碼或研究示例）
- **記錄**具體的實現方式，若可能請提供代碼片段
- **分析**開發者選擇此方法的原因
- **解釋**它如何提升用戶體驗

#### 實際應用
- **比較**您的接口與我們在植物園項目中使用的技術
- **建議**如何使用您的接口來增強或擴展植物園的功能
- **識別**其他項目中此接口的潛在價值

### 第三步：代碼示例

包含一個簡單且可運行的代碼示例，展示您的接口的實際應用。代碼應該：
- **功能性** - 測試後代碼應能正常運行
- **有註解** - 解釋每部分的作用
- **相關性** - 與實際使用場景相關
- **適合初學者** - 讓學習網頁開發的人能夠理解

## 提交格式

使用清晰的標題結構組織您的提交：

```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 上的代碼示例
- **檢查**流行網站，使用瀏覽器開發工具
- **觀看**教學視頻，獲得視覺化解釋

**寫作指南：**
- **使用**自己的語言，而非直接複製文檔
- **包含**具體示例和代碼片段
- **解釋**技術概念，像在教朋友一樣
- **連結**您的接口與更廣泛的網頁開發概念

**代碼示例建議：**
- **創建**一個簡單的演示，展示接口的主要功能
- **基於**植物園項目中的概念進行擴展
- **專注**於功能性，而非視覺設計
- **測試**您的代碼，確保其正確運行

## 提交截止日期

[插入截止日期]

## 有問題嗎？

如果您對作業的任何方面有疑問，請隨時提出！這次調查將加深您對 DOM 如何支持我們每天使用的互動式網頁體驗的理解。

---

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。