5.1 KiB

Raw Permalink Blame History Unescape Escape

DOM 元素調查作業

概覽

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

學習目標

完成此作業後，你將能夠：

研究並深入了解特定的 DOM 介面
分析實際應用中的 DOM 操作實現
連結理論概念與實務應用
培養技術文件撰寫與分析能力

指示

第一步：選擇你的 DOM 介面

造訪 MDN 的完整 DOM 介面列表，並選擇一個你感興趣的介面。建議從以下類別中挑選，以豐富學習內容：

初學者友善選項：

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 功能
指出其他適合使用此介面的項目

第三步：程式碼範例

包含一個簡單且可執行的程式碼範例，展現你的介面實際運作。此程式碼應該：

具功能性 — 測試後可正確執行
有註解 — 解釋各部分功能
相關性 — 與實際使用案例相關
適合初學者 — 容易被學習網頁開發的人理解

繳交格式

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

# [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 如何支援日常網頁互動體驗的理解。

免責聲明：
本文件由 AI 翻譯服務 Co-op Translator 協助翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始語言版本的文件應被視為權威來源。對於關鍵資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤釋負責。

5.1 KiB Raw Permalink Blame History Unescape Escape