JavaScript · Bab 3
Manipulasi Document Object Model (DOM) & CSS
Memilih elemen HTML, mengubah teks dan atribut, membuat elemen baru, serta mengatur class CSS lewat JavaScript.
DOM (Document Object Model) adalah representasi halaman HTML yang dapat dibaca dan diubah oleh JavaScript. Dengan DOM, program bisa mengambil elemen, mengubah isi halaman, menambah elemen baru, dan mengganti tampilan CSS secara dinamis.
3.1 Memilih Elemen DOM
Elemen dapat dipilih menggunakan getElementById, querySelector, atau querySelectorAll. Untuk satu elemen tertentu, querySelector sering paling praktis karena menerima selector seperti CSS.
🧪 Coba ubah: tambahkan satu <li class="tugas"> baru, lalu lihat jumlah tugas di output.
Belum ada output.
Selain itu, DOM memiliki selector koleksi lama seperti getElementsByClassName() dan getElementsByTagName(). Keduanya mengembalikan HTMLCollection yang bersifat live, sedangkan querySelectorAll() mengembalikan NodeList statis. NodeList mendukung forEach, tetapi HTMLCollection biasanya perlu diulang dengan for...of atau diubah dahulu memakai Array.from.
🧪 Coba ubah: ganti style.color menjadi "darkblue", lalu jalankan ulang.
Belum ada output.
3.2 Mengubah Isi dan Atribut Elemen
Gunakan textContent untuk mengubah teks, innerHTML untuk mengisi HTML, dan setAttribute atau properti DOM untuk mengubah atribut.
🧪 Coba ubah: ganti teks sapaan dan nilai atribut href pada link.
Belum ada output.
3.3 Membuat dan Menambahkan Elemen
document.createElement() membuat elemen baru. Setelah isinya diatur, elemen dapat dimasukkan ke halaman dengan appendChild().
🧪 Coba ubah: tambahkan "Doni" ke array peserta.
Belum ada output.
3.4 Mengatur CSS dengan classList
Mengubah style langsung lewat JavaScript bisa dilakukan, tetapi untuk kode yang rapi lebih baik siapkan class CSS, lalu aktifkan dengan classList.add, remove, atau toggle.
🧪 Coba ubah: ganti classList.add("aktif") menjadi classList.toggle("aktif").
Belum ada output.