Mata Kuliah: Pemrograman Berbasis Web
🧭 1. Pengertian DOM
7
📖 Deskripsi
DOM (Document Object Model) adalah representasi dokumen HTML dalam bentuk struktur objek (tree) yang dapat dimanipulasi menggunakan JavaScript.
🧠 Narasi
Ketika browser membaca HTML, ia tidak langsung menampilkan teks mentah, tetapi mengubahnya menjadi struktur pohon (tree). Setiap tag menjadi node yang bisa diakses dan dimodifikasi. Inilah yang memungkinkan halaman web berubah tanpa reload.
🌳 2. Struktur DOM (DOM Tree)
7
📖 Deskripsi
DOM disusun seperti pohon dengan hubungan:
🧱 Jenis Node
| Jenis | Penjelasan |
|---|---|
| Root | <html> |
| Parent | Elemen induk |
| Child | Elemen turunan |
| Sibling | Elemen sejajar |
🧠 Narasi
Struktur ini penting karena JavaScript bekerja dengan menavigasi node untuk menemukan dan mengubah elemen tertentu.
🔍 3. Mengakses Elemen DOM
7
📖 Deskripsi
JavaScript menyediakan metode untuk memilih elemen.
🧱 Metode Utama
| Metode | Fungsi |
|---|---|
getElementById() | Berdasarkan ID |
getElementsByClassName() | Berdasarkan class |
querySelector() | Selector CSS |
querySelectorAll() | Semua elemen |
💻 Contoh
let judul = document.getElementById("judul");
🧠 Narasi
Pemilihan elemen adalah langkah pertama sebelum manipulasi DOM.
✏️ 4. Manipulasi Konten
7
📖 Deskripsi
Mengubah isi elemen HTML.
💻 Contoh
document.getElementById("judul").innerHTML = "Belajar DOM";
🧠 Narasi
Manipulasi ini memungkinkan perubahan konten secara real-time tanpa reload halaman.
🎨 5. Manipulasi Atribut & Style
7
📖 Deskripsi
Mengubah atribut dan tampilan elemen.
💻 Contoh
document.getElementById("box").style.backgroundColor = "red";
🧠 Narasi
JavaScript dapat menggantikan CSS secara dinamis berdasarkan interaksi pengguna.
➕ 6. Menambah dan Menghapus Elemen
8
📖 Deskripsi
DOM memungkinkan penambahan dan penghapusan elemen.
💻 Contoh
let p = document.createElement("p");
p.innerHTML = "Paragraf baru";
document.body.appendChild(p);
🧠 Narasi
Fitur ini penting untuk membuat aplikasi web dinamis seperti todo list.
🔄 7. Navigasi DOM
8
📖 Deskripsi
Mengakses hubungan antar node.
🧱 Properti
| Properti | Fungsi |
|---|---|
| parentNode | Induk |
| childNodes | Anak |
| nextSibling | Node berikutnya |
🧠 Narasi
Navigasi membantu berpindah antar elemen tanpa harus mencari ulang.
🖱️ 8. Event Handling dalam DOM
9
📖 Deskripsi
Event memungkinkan interaksi pengguna.
💻 Contoh
document.getElementById("btn").addEventListener("click", function() {
alert("Diklik!");
});
🧠 Narasi
Event membuat halaman web menjadi hidup dan responsif terhadap tindakan pengguna.
🔁 9. Event Bubbling & Capturing
6
📖 Deskripsi
Event dapat menyebar dalam DOM.
🧠 Narasi
- Bubbling: dari child ke parent
- Capturing: dari parent ke child
Memahami ini penting untuk kontrol event kompleks.
🧪 10. Validasi Form dengan DOM
8
📖 Deskripsi
Validasi memastikan input benar.
💻 Contoh
if (document.getElementById("nama").value == "") {
alert("Nama wajib diisi");
}
🧠 Narasi
Validasi penting untuk menjaga kualitas data.
⚠️ 11. Kesalahan Umum DOM
6
📖 Deskripsi
Kesalahan yang sering terjadi:
- Elemen tidak ditemukan
- Script dijalankan sebelum DOM siap
- Salah selector
🧠 Narasi
Gunakan:
console.log()- Developer tools
🧪 12. Studi Kasus Mini Project
🎯 Tugas
Buat aplikasi:
- Input teks
- Tombol tambah
- Tampilkan ke list
- Bisa hapus item
Gunakan:
- DOM manipulation
- Event handling
🎯 13. Kesimpulan
- DOM adalah jembatan HTML dan JavaScript
- Manipulasi DOM membuat web dinamis
- Event adalah inti interaksi
- Navigasi DOM penting untuk efisiensi
🎓 Penutup
Materi ini menjadi dasar untuk:
➡️ AJAX & Fetch API
➡️ Single Page Application (SPA)
➡️ Framework seperti Vue.js
