JavaScript DOM

Target: Pemula yang sudah memahami dasar JavaScript (variabel, fungsi, array, dan object) serta ingin menguasai manipulasi halaman web secara dinamis menggunakan Document Object Model (DOM API). Versi: Modern DOM API / HTML5 Prasyarat: JavaScript Dasar Fokus modul pembelajaran ini: mental model DOM tree → document & node → modern selectors → manipulasi teks, atribut, & style → event handling & bubbling → event delegation → form & table manipulation → performa DocumentFragment → keamanan XSS → mini project.

---

Cara Belajar

🟢 Fundamental
→ wajib dipahami untuk mencari elemen, mengubah teks, atribut, style, dan penanganan dasar
 
🟡 Lanjutan
→ pelajari setelah fundamental nyaman: event delegation, form/table handling, template, & window
 
🔴 Advanced / Operasional
→ penting untuk optimasi performa rendering batching dan keamanan proteksi serangan XSS

Mental model interaksi JavaScript terhadap DOM Tree di Browser:

         Dokumen HTML mentah (File .html)
                         │
                         ▼
             Browser Parsing Engine
                         │
                         ▼
        Pohon Objek di Memori (DOM Tree)
                         │
         ┌───────────────┼───────────────┐
         ▼               ▼               ▼
     Selectors       Mutations         Events
  (querySelector) (append/remove)  (addEventListener)
         │               │               │
         └───────────────┼───────────────┘
                         │
                         ▼
       Tampilan Layar Ter-update Dinamis (Repaint)

Hafalan:

DOM          → Struktur data pohon objek di browser yang mewakili dokumen HTML
Node         → Entitas dasar dalam pohon DOM (Element, Text, Comment, Document)
Element      → Node khusus yang berbentuk tag HTML (<tag>)
Selector     → Perintah pencarian elemen DOM menggunakan aturan CSS Selector
Event        → Sinyal kejadian interaksi pengguna (klik, ketik, submit, scroll)

---

Daftar Isi

🟢 Fundamental

1. Pengenalan DOM & Mental Model Pohon Dokumen
2. Menyiapkan Struktur HTML & File Script
3. Tipe Data DOM (Document, Element, Node, NodeList, Event)
4. Document Object (Pintu Masuk Utama DOM)
5. Node & Hubungan Keluarga Node (Parent, Child, Sibling)
6. Node Type & Node Constants
7. Element vs Node & Membuat Elemen (createElement, append)
8. Text Node & Text Content
9. Selector Modern (querySelector & querySelectorAll)
10. Selector Klasik (getElementById, getElementsByClassName, getElementsByTagName)
11. NodeList vs HTMLCollection (Live vs Static Collection)
12. Modifikasi Teks & Konten (textContent, innerText, innerHTML)
13. Manipulasi Atribut (getAttribute, setAttribute, dataset)
14. NamedNodeMap & Attr Object
15. Manipulasi Style & Class CSS (style, classList)

🟡 Lanjutan

16. Event Listener & Handler (addEventListener, removeEventListener)
17. Event Object & Event Flow (Capturing, Bubbling, stopPropagation, preventDefault)
18. Event Delegation (Pola Penanganan Event Skalabel)
19. Window Object (Global Browser Context, innerHeight, scrollY, Dialogs)
20. HTML Element & DOM Lifecycle (DOMContentLoaded vs load)
21. HTML Form Element (Input, Select, Checkbox, Radio, FormData, Validation)
22. HTML Table Element & Dinamis Table Manipulation (insertRow, insertCell)
23. HTML Custom Elements & Template Element (