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 (ikut berubah saat elemen halaman ditambah atau dihapus), 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 "Pepaya" ke array buah.
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 terkirimkan dengan classList.add, remove, atau toggle.
🧪 Coba ubah: ganti classList.add("terkirim") menjadi classList.toggle("terkirim").
Belum ada output.
Berikutnya: event di bab 4 untuk merespons tindakan pengguna.
Kondisi awal
Pada akhir Bab 2, form tanggal lahir sudah mempunyai pilihan tanggal, bulan, dan tahun. Kita sudah memakai perulangan untuk menambah elemen. Sekarang buka Lab Bab 3: Ubah Halaman dengan DOM. Ini halaman latihan baru dengan judul awal, status kosong, daftar peserta kosong, dan kartu tugas yang belum dikumpulkan.
DOM (Document Object Model) adalah bentuk halaman HTML yang dapat dibaca dan diubah JavaScript. Elemen adalah bagian halaman seperti judul, paragraf, atau daftar. Editor JavaScript mewakili script.js. Zona adalah area bernomor yang boleh diganti isinya. Salin setiap potongan ke zona yang disebutkan dan pertahankan kode di luar zona. Tekan Jalankan untuk melihat Preview dan Cek untuk memeriksa jawaban. Tidak perlu membuat berkas atau memasang aplikasi.
Panduan mengubah halaman
Langkah 1: Pilih elemen lalu ubah isinya
document mewakili halaman. querySelector mencari elemen pertama yang cocok dengan selector, yaitu pola pemilihan seperti pada CSS. Tanda # berarti ID: #judul menunjuk elemen dengan id="judul". const menyimpan elemen yang ditemukan agar dapat dipakai pada baris berikutnya.
Tempel di Lab 3, Zona 1. Berkas: script.js
const judul = document.querySelector("#judul");
const status = document.querySelector("#status");
judul.textContent = "Latihan DOM Selesai";
status.innerHTML = "<strong>DOM berhasil diubah.</strong>";textContent mengganti isi sebagai teks biasa. innerHTML membaca isi sebagai HTML, sehingga tag <strong> membuat pesan status tebal. Di sini HTML berasal dari teks tetap dalam kode. Untuk teks dari pengguna, gunakan textContent agar isinya tidak dianggap sebagai tag atau skrip.
Hasil: setelah Jalankan, judul menjadi Latihan DOM Selesai dan status menampilkan DOM berhasil diubah. dalam huruf tebal.
Langkah 2: Buat tiga baris peserta
Lab sudah menyediakan array peserta berisi Alya, Bima, dan Citra, serta daftarPeserta yang menunjuk daftar HTML. Jangan menyalin deklarasi itu ke zona. forEach menjalankan callback, yaitu fungsi yang dipanggil untuk setiap nama. Parameter nama menerima satu nama pada setiap putaran.
Tempel di Lab 3, Zona 2. Berkas: script.js
peserta.forEach(function (nama) {
const item = document.createElement("li");
item.textContent = nama;
daftarPeserta.appendChild(item);
});createElement("li") membuat elemen baris daftar yang belum terpasang di halaman. item.textContent mengisi namanya. appendChild memasukkan baris itu ke akhir daftar. Urutannya mengikuti array, sehingga Alya muncul pertama.
Hasil: setelah Jalankan, daftar berisi tepat tiga baris berurutan: Alya, Bima, dan Citra.
Langkah 3: Aktifkan tampilan kartu
kartuStatus sudah disediakan di luar zona. classList adalah pengelola class CSS pada elemen. classList.add menambahkan class tanpa membuang class lama. Lab sudah menyediakan aturan .aktif untuk latar hijau, garis hijau, dan tulisan tebal.
Tempel di Lab 3, Zona 3. Berkas: script.js
kartuStatus.textContent = "Status tugas: sudah dikumpulkan";
kartuStatus.classList.add("aktif");Nama class pada JavaScript ditulis "aktif", tanpa titik. Titik hanya dipakai ketika menulis selector CSS. Setelah ketiga zona lengkap, tekan Jalankan, lalu pilih dan Cek setiap langkah lab. Penilai memeriksa teks, elemen strong, jumlah baris, nama pertama, serta penggunaan forEach, createElement, dan classList.add.
Hasil: kartu bertuliskan Status tugas: sudah dikumpulkan, berlatar hijau dengan teks tebal; pemeriksaan ketiga langkah lulus.
Langkah 4: Jalankan halaman lengkap di materi
Playground adalah kotak kode yang dapat dijalankan pada halaman materi. Tekan Jalankan pada contoh utuh berikut. HTML menyediakan elemen, style menyediakan warna kartu, lalu script di bawah HTML mengubah elemen yang sudah tersedia. Untuk lab, tetap gunakan potongan per zona dari langkah sebelumnya.
Berkas: index.html
Belum ada output.
Hasil: Preview playground menampilkan judul dan status baru, tiga nama peserta, serta kartu aktif seperti lab lengkap; kode ini tidak mencetak pesan ke Console.
Bekal memilih elemen dan tampilan
getElementById mencari satu elemen berdasarkan ID tanpa tanda pagar. querySelectorAll mengambil semua elemen yang cocok sebagai NodeList statis: daftar hasilnya tidak ikut bertambah ketika elemen baru dibuat. NodeList mendukung forEach. getElementsByClassName dan getElementsByTagName menghasilkan HTMLCollection yang live, yaitu ikut berubah saat elemen halaman bertambah atau berkurang. Array.from dapat mengubah koleksi menjadi array untuk diulang.
Atribut adalah keterangan pada tag, misalnya href pada tautan. setAttribute mengubah atribut berdasarkan namanya. Properti style mengubah tampilan langsung, sedangkan classList memakai aturan CSS yang sudah disiapkan. classList.remove menghapus class dan classList.toggle membalik keadaan class, dari ada menjadi tidak ada atau sebaliknya. Lab ini memakai add agar kartu tetap aktif setiap dijalankan.
Kalau ada galat
Muncul galat membaca null. Elemen tidak ditemukan. Salin ulang Zona 1, termasuk tanda pagar dan huruf kecil pada selector. Pertahankan HTML bawaan lab. Pada playground, script harus tetap berada sesudah HTML.
Daftar kosong atau nama berulang. Ganti seluruh Zona 2 dengan potongan Langkah 2, bukan menambah salinan di bawahnya. Pertahankan deklarasi peserta dan daftarPeserta di luar zona, lalu tekan Jalankan untuk membuat Preview baru.
Status menampilkan tag sebagai tulisan. Salin ulang Zona 1. Judul memakai textContent, sedangkan status memakai innerHTML agar strong dibaca sebagai HTML.
Kartu belum hijau. Salin ulang Zona 3, termasuk classList.add("aktif"). Jangan mengganti nama class atau membuang CSS bawaan.
Keadaan akhir
Halaman langsung berubah saat program dijalankan. Bab 4 memakai perubahan DOM yang sama di dalam fungsi yang menunggu klik, ketikan, atau tekanan tombol keyboard.