Data dan Halaman Web · Pelajaran 9 dari 10
Mengubah halaman web dengan DOM
10 menit baca · BelajarCode
Saat peramban membuka halaman web, HTML diubah menjadi pohon objek yang disebut DOM (Document Object Model). JavaScript bisa membaca dan mengubah pohon ini, sehingga isi halaman berubah tanpa memuat ulang.
Kode DOM tidak berjalan di Playground
Playground menjalankan JavaScript tanpa halaman web, jadi tidak ada document di sana. Untuk mencoba contoh di pelajaran ini, simpan kedua berkas di komputermu lalu buka index.html di peramban. Bagian logika yang tidak memakai document tetap bisa dicoba di Playground.
Halaman contoh
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Penghitung Air Minum</title>
</head>
<body>
<h1>Air minum hari ini</h1>
<p id="jumlah">0 gelas</p>
<button id="tambah">Tambah segelas</button>
<p id="pesan"></p>
<script src="app.js"></script>
</body>
</html>Memilih elemen dan mengubah isinya
1const teksJumlah = document.querySelector("#jumlah");2const tombol = document.querySelector("#tambah");3const pesan = document.querySelector("#pesan");45let gelas = 0;67tombol.addEventListener("click", () => {8 gelas++;9 teksJumlah.textContent = `${gelas} gelas`;10 if (gelas >= 8) {11 pesan.textContent = "Target 8 gelas tercapai!";12 }13});document.querySelector("#jumlah")mencari elemen yang id-nyajumlah. Tanda#untuk id, titik untuk class, misalnya.kartu.textContentmembaca atau mengganti teks di dalam elemen.addEventListener("click", fungsi)menjalankan fungsi setiap kali tombol diklik. Fungsi ini adalah callback yang sudah kamu pelajari.
Memisahkan logika dari tampilan
Kebiasaan yang baik: tulis logika dalam fungsi biasa yang tidak menyentuh DOM, lalu DOM hanya menampilkan hasilnya. Logika seperti ini bisa diuji di Playground.
1function pesanAir(gelas, target = 8) {2 if (gelas >= target) return "Target tercapai!";3 const sisa = target - gelas;4 return `Kurang ${sisa} gelas lagi`;5}67console.log(pesanAir(3));8console.log(pesanAir(8));Kurang 5 gelas lagi Target tercapai!
Di app.js, cukup panggil pesan.textContent = pesanAir(gelas); setiap kali tombol diklik.
| Perintah | Gunanya |
|---|---|
document.querySelector(selektor) | Mengambil elemen pertama yang cocok |
document.querySelectorAll(selektor) | Mengambil semua elemen yang cocok |
elemen.textContent = "..." | Mengganti teks di dalam elemen |
elemen.classList.add("aktif") | Menambah class, misalnya untuk mengubah warna lewat CSS |
elemen.addEventListener("click", fungsi) | Menanggapi klik, ketikan, dan kejadian lain |
document.createElement("li") | Membuat elemen baru |
induk.append(anak) | Menambahkan elemen baru ke dalam halaman |
Cek pemahaman
Selektor apa yang dipakai querySelector untuk mengambil elemen dengan id="skor"?
Latihan
Membuat isi daftar
Tulis fungsi buatDaftar(items) yang menerima array teks dan mengembalikan teks HTML berisi daftar, misalnya <ul><li>Apel</li><li>Jeruk</li></ul>. Fungsi ini tidak memakai DOM, jadi bisa diuji di Playground.
Pembahasan
1function buatDaftar(items) {2 const isi = items.map((item) => `<li>${item}</li>`).join("");3 return `<ul>${isi}</ul>`;4}56console.log(buatDaftar(["Apel", "Jeruk"]));7console.log(buatDaftar([]));<ul><li>Apel</li><li>Jeruk</li></ul> <ul></ul>
Di halaman sungguhan, hasilnya bisa dipasang dengan elemen.innerHTML = buatDaftar(data). Hati-hati: jangan memasang teks yang diketik pengguna lewat innerHTML tanpa diamankan, karena bisa disisipi kode berbahaya. Untuk teks dari pengguna, pakai textContent.
Jalankan contoh kode di pelajaran ini tanpa instalasi lewat compiler JavaScript online.