# Tugasan Penyelidikan Elemen DOM ## Gambaran Keseluruhan Kini setelah anda merasai kuasa manipulasi DOM secara langsung, tiba masanya untuk meneroka dunia luas antara muka DOM. Tugasan ini akan memperdalam pemahaman anda tentang bagaimana teknologi web berinteraksi dengan DOM, lebih daripada sekadar menyeret elemen. ## Objektif Pembelajaran Dengan menyelesaikan tugasan ini, anda akan: - **Menyelidik** dan memahami satu antara muka DOM secara mendalam - **Menganalisis** pelaksanaan manipulasi DOM dalam dunia sebenar - **Menghubungkan** konsep teori kepada aplikasi praktikal - **Membangunkan** kemahiran dalam dokumentasi teknikal dan analisis ## Arahan ### Langkah 1: Pilih Antara Muka DOM Anda Lawati senarai komprehensif [antara muka DOM di MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) dan pilih satu antara muka yang menarik minat anda. Pertimbangkan untuk memilih daripada kategori berikut untuk variasi: **Pilihan Mesra Pemula:** - `Element.classList` - Menguruskan kelas CSS secara dinamik - `Document.querySelector()` - Pemilihan elemen yang lebih maju - `Element.addEventListener()` - Pengendalian acara lebih daripada acara penunjuk - `Window.localStorage` - Penyimpanan data di sisi klien **Cabaran Pertengahan:** - `Intersection Observer API` - Mengesan keterlihatan elemen - `MutationObserver` - Memantau perubahan DOM - `Drag and Drop API` - Alternatif kepada pendekatan berasaskan penunjuk - `Geolocation API` - Mengakses lokasi pengguna **Penerokaan Lanjutan:** - `Web Components` - Elemen tersuai dan shadow DOM - `Canvas API` - Grafik programatik - `Web Workers` - Pemprosesan latar belakang - `Service Workers` - Fungsi luar talian ### Langkah 2: Penyelidikan dan Dokumentasi Buat analisis komprehensif (300-500 perkataan) yang merangkumi: #### Gambaran Teknikal - **Definisikan** apa yang dilakukan oleh antara muka pilihan anda dalam bahasa yang jelas dan mesra pemula - **Terangkan** kaedah utama, sifat, atau acara yang disediakan - **Huraikan** jenis masalah yang dirancang untuk diselesaikan #### Pelaksanaan Dunia Sebenar - **Cari** laman web yang menggunakan antara muka pilihan anda (periksa kod atau cari contoh) - **Dokumentasikan** pelaksanaan spesifik dengan petikan kod jika boleh - **Analisis** mengapa pembangun memilih pendekatan ini - **Terangkan** bagaimana ia meningkatkan pengalaman pengguna #### Aplikasi Praktikal - **Bandingkan** antara muka anda dengan teknik yang kami gunakan dalam projek terrarium - **Cadangkan** bagaimana antara muka anda boleh meningkatkan atau memperluaskan fungsi terrarium - **Kenal pasti** projek lain di mana antara muka ini akan berguna ### Langkah 3: Contoh Kod Sertakan contoh kod ringkas dan berfungsi yang menunjukkan antara muka anda beraksi. Ia harus: - **Berfungsi** - Kod tersebut harus benar-benar berfungsi apabila diuji - **Diberi Komen** - Terangkan apa yang dilakukan oleh setiap bahagian - **Berkaitan** - Berkaitan dengan kes penggunaan yang realistik - **Mesra Pemula** - Mudah difahami oleh seseorang yang sedang belajar pembangunan web ## Format Penyerahan Strukturkan penyerahan anda dengan tajuk yang jelas: ```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] ``` ## Rubrik Penilaian | Kriteria | Cemerlang (A) | Mahir (B) | Sedang Berkembang (C) | Perlu Penambahbaikan (D) | |----------|---------------|-----------|------------------------|--------------------------| | **Pemahaman Teknikal** | Menunjukkan pemahaman mendalam dengan penjelasan yang tepat dan terminologi yang betul | Menunjukkan pemahaman yang kukuh dengan penjelasan yang kebanyakannya tepat | Pemahaman asas dengan beberapa salah faham | Pemahaman terhad dengan kesilapan yang ketara | | **Analisis Dunia Sebenar** | Mengenal pasti dan menganalisis pelaksanaan sebenar dengan contoh spesifik | Menemukan contoh sebenar dengan analisis yang mencukupi | Menemukan contoh tetapi analisis kurang mendalam | Hubungan dunia sebenar yang kabur atau tidak tepat | | **Contoh Kod** | Kod berfungsi, diberi komen dengan baik yang jelas menunjukkan antara muka | Kod berfungsi dengan komen yang mencukupi | Kod berfungsi tetapi memerlukan dokumentasi yang lebih baik | Kod mempunyai kesilapan atau penjelasan yang lemah | | **Kualiti Penulisan** | Penulisan yang jelas, menarik dengan struktur yang betul dan komunikasi teknikal | Teratur dengan penulisan teknikal yang baik | Organisasi dan kejelasan yang mencukupi | Organisasi yang lemah atau komunikasi yang tidak jelas | | **Pemikiran Kritikal** | Membuat hubungan yang mendalam antara konsep dan mencadangkan aplikasi inovatif | Menunjukkan pemikiran analitik yang baik dan hubungan yang relevan | Beberapa analisis hadir tetapi boleh lebih mendalam | Bukti pemikiran kritikal yang terhad | ## Petua untuk Kejayaan **Strategi Penyelidikan:** - **Mulakan** dengan dokumentasi MDN untuk maklumat yang berwibawa - **Cari** contoh kod di GitHub atau CodePen - **Periksa** laman web popular menggunakan alat pembangun pelayar - **Tonton** video tutorial untuk penjelasan visual **Panduan Penulisan:** - **Gunakan** kata-kata anda sendiri dan bukan menyalin dokumentasi - **Sertakan** contoh spesifik dan petikan kod - **Terangkan** konsep teknikal seolah-olah mengajar rakan - **Hubungkan** antara muka anda dengan konsep pembangunan web yang lebih luas **Idea Contoh Kod:** - **Buat** demo ringkas yang mempamerkan ciri utama antara muka - **Bangunkan** konsep daripada projek terrarium kami jika relevan - **Fokus** pada fungsi berbanding reka bentuk visual - **Uji** kod anda untuk memastikan ia berfungsi dengan betul ## Tarikh Akhir Penyerahan [Masukkan tarikh akhir di sini] ## Soalan? Jika anda memerlukan penjelasan tentang mana-mana aspek tugasan ini, jangan ragu untuk bertanya! Penyelidikan ini akan memperdalam pemahaman anda tentang bagaimana DOM membolehkan pengalaman web interaktif yang kita gunakan setiap hari. --- **Penafian**: Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.