Materi JavaScript 5
Mengubah Isi Halaman dengan DOM

oleh: Suryo Adhy Chandra, ST

Sampai bab sebelumnya, hasil kerja JavaScript kita tampil lewat alert atau console.log. Keduanya berguna untuk belajar, tetapi bukan itu yang dilihat pengunjung. Bab ini membahas cara JavaScript mengubah isi halaman secara langsung, dan di sinilah JavaScript mulai terasa gunanya.

1. Apa itu DOM

Ketika browser membaca berkas HTML, ia tidak menyimpannya sebagai teks biasa. Browser mengubahnya menjadi susunan objek bertingkat yang disebut DOM, singkatan dari Document Object Model. Setiap tag menjadi satu objek, dan objek itu bisa dibaca maupun diubah oleh JavaScript.

Karena yang diubah adalah DOM di memori browser, berkas HTML aslinya tidak ikut berubah. Kalau halaman dimuat ulang, semuanya kembali seperti semula. Ini penting dipahami sejak awal agar tidak bingung nanti.

2. Menemukan elemen yang ingin diubah

Sebelum mengubah, kita harus menemukan elemennya lebih dulu. Cara yang paling banyak dipakai sekarang adalah querySelector, karena penulisannya sama dengan pemilih di CSS.

// mencari berdasarkan id, diawali tanda pagar const judul = document.querySelector("#judul"); // mencari berdasarkan class, diawali tanda titik const kotak = document.querySelector(".kotak"); // mencari berdasarkan nama tag const paragraf = document.querySelector("p"); // mencari SEMUA yang cocok, hasilnya berupa daftar const semuaKotak = document.querySelectorAll(".kotak");
querySelector hanya mengembalikan elemen pertama yang cocok. Kalau ada lima elemen ber-class sama dan kamu ingin mengubah semuanya, pakai querySelectorAll lalu ulangi dengan perulangan.

3. Mengubah teks di dalam elemen

Setelah elemennya ditemukan, isinya dapat diganti lewat textContent.

const judul = document.querySelector("#judul"); judul.textContent = "Judul yang sudah diganti";

Ada juga innerHTML yang memungkinkan kita menyisipkan tag HTML, bukan sekadar teks biasa.

const kotak = document.querySelector("#kotak"); kotak.innerHTML = "Halo dunia, ini tebal";
Gunakan textContent bila isinya berasal dari masukan pengguna. Memakai innerHTML untuk teks yang diketik pengguna membuka celah keamanan, karena tag apa pun yang mereka ketik akan ikut dijalankan browser. Pakai innerHTML hanya untuk isi yang kamu tulis sendiri.

4. Mengubah tampilan lewat class

Kita bisa mengubah gaya langsung lewat style, tetapi cara yang lebih rapi adalah menyiapkan class di CSS lalu menambah atau melepasnya dari JavaScript.

const kotak = document.querySelector("#kotak"); kotak.classList.add("aktif"); // menambahkan class kotak.classList.remove("aktif"); // melepas class kotak.classList.toggle("aktif"); // menambah bila belum ada, melepas bila sudah ada
Cara ini lebih baik karena urusan tampilan tetap berada di berkas CSS, sedangkan JavaScript hanya mengurus kapan tampilan itu berubah. Kalau nanti warnanya perlu diganti, cukup ubah CSS-nya tanpa menyentuh kode JavaScript sama sekali.

5. Membuat elemen baru

Selain mengubah yang sudah ada, kita juga bisa membuat elemen baru lalu memasukkannya ke halaman. Prosesnya tiga langkah: buat, isi, lalu tempelkan.

// 1. membuat elemen const item = document.createElement("li"); // 2. mengisi teksnya item.textContent = "Belajar DOM"; // 3. menempelkan ke elemen induk const daftar = document.querySelector("#daftar"); daftar.appendChild(item);

Pola ini yang dipakai untuk menampilkan data dari daftar. Misalnya menampilkan seluruh isi sebuah array sebagai daftar di halaman:

const siswa = ["Sinta", "Bagas", "Rani"]; const daftar = document.querySelector("#daftar"); siswa.forEach(function (nama) { const item = document.createElement("li"); item.textContent = nama; daftar.appendChild(item); });

6. Kesalahan yang paling sering terjadi

Ada satu kesalahan yang hampir dialami semua pemula, dan pesannya membingungkan: Cannot read properties of null.

<head> <script> const judul = document.querySelector("#judul"); judul.textContent = "Halo"; // ERROR: judul bernilai null </script> </head> <body> <h1 id="judul">Judul awal</h1> </body>

Penyebabnya, skrip dijalankan sebelum elemen h1 sempat dibaca browser, sehingga pencarian elemennya menghasilkan null. Ada dua cara mengatasinya:

<script src="skrip.js" defer></script>

7. Latihan

Petunjuk: untuk latihan pertama dan ketiga kamu memerlukan event klik, yang dibahas pada bab berikutnya. Kamu bisa mendahuluinya dengan tombol.addEventListener("click", function () { ... }).
← Kembali Ke Daftar Pelajaran JavaScript