DOM JavaScript: Membaca dan Mengubah Halaman

Semua yang kamu pelajari sampai sejauh ini — variabel, fungsi, perulangan, kondisional — berjalan di console, tidak kelihatan oleh orang yang membuka halamannya. Sekarang saatnya kita sambungkan ke dunia nyata. DOM itu jembatan yang menghubungkan JavaScript dengan HTML yang benar-benar tampil di halaman. Lewat DOM, kodemu bisa membaca isi halaman, mengganti teks dan style, menyembunyikan lalu memunculkan elemen, sampai menambah atau menghapus elemen — semuanya terjadi langsung di depan mata pengguna.

Di sinilah JavaScript akhirnya kelihatan hasilnya. Setiap hal interaktif yang pernah kamu temui di sebuah website bekerja lewat DOM. Yuk, kita pelajari cara pakainya.

DOM itu apa

DOM itu kepanjangan dari Document Object Model. Saat browser memuat HTML-mu, dia langsung menyusun gambaran halaman versi hidup di dalam memori — bentuknya seperti pohon yang memuat seluruh elemen, dan setiap tag berubah jadi sebuah objek yang bisa dijangkau oleh JavaScript. Nah, pohon itulah yang kita sebut DOM.

Intinya begini: DOM adalah HTML-mu, tapi dalam wujud objek yang bisa diutak-atik JavaScript. Tag <h1>, tombol, paragraf — masing-masing jadi objek di dalam DOM yang isinya bisa kamu baca sekaligus kamu ubah lewat kode. Begitu kamu mengubah satu elemen di DOM, halamannya langsung ikut berubah saat itu juga. Yang kamu sentuh bukan file HTML aslinya, melainkan halaman yang sedang aktif di browser.

Pintu masuk ke semuanya adalah satu objek istimewa bernama document, yang mewakili keseluruhan halaman. Apa pun yang kamu kerjakan dengan DOM selalu berangkat dari document.

Memilih elemen

Sebelum bisa mengubah sebuah elemen, kamu harus menemukannya dulu. Alat andalan untuk itu adalah document.querySelector(), yang akan mengembalikan elemen pertama yang cocok dengan selector CSS — ya, selector yang sama persis dengan yang kamu pelajari di artikel selector CSS:

const judul = document.querySelector("h1");        // <h1> yang pertama
const intro = document.querySelector(".intro");    // elemen pertama yang ber-class "intro"
const menu = document.querySelector("#menu");      // elemen yang ber-id "menu"

Karena yang dipakai adalah selector CSS, kamu sebenarnya sudah punya bekal cara menyasar elemen — "h1" untuk tag, ".intro" untuk class, "#menu" untuk id. Hasil dari querySelector berupa objek DOM, yang tinggal kamu tampung ke sebuah variabel lalu kamu olah sesukamu.

Kalau yang kamu butuhkan adalah semua elemen yang cocok, bukan cuma satu yang pertama, gunakan querySelectorAll. Hasilnya berupa daftar yang bisa kamu telusuri satu per satu:

const semuaTombol = document.querySelectorAll("button");
semuaTombol.forEach((btn) => {
  console.log(btn);
});

Mengubah konten dan style

Setelah elemennya kamu pegang, kamu bisa membacanya sekaligus mengubahnya. Yang paling sering diubah biasanya ini:

Teks di dalam elemen lewat textContent:

const judul = document.querySelector("h1");
judul.textContent = "Judul Baru!";   // mengganti teks yang tampil di layar

HTML di dalam sebuah elemen lewat innerHTML (hati-hati pakainya — isinya benar-benar diproses sebagai tag):

const kotak = document.querySelector(".kotak");
kotak.innerHTML = "<strong>Teks tebal</strong>";

Style melalui property style:

judul.style.color = "teal";
judul.style.fontSize = "32px";   // ingat: pakai camelCase (fontSize, bukan font-size)

Perhatikan, nama property CSS berubah jadi camelCase begitu masuk ke JavaScript: font-size jadi fontSize, background-color jadi backgroundColor. Penyebabnya sederhana, tanda hubung memang tidak boleh dipakai di nama property JavaScript.

Cara yang lebih baik mengubah style: classList

Mengatur style satu per satu lewat .style memang jalan, tapi begitu kebutuhanmu lebih dari sekadar penyesuaian kilat, ada cara yang jauh lebih rapi: tulis dulu style-nya di CSS dalam bentuk sebuah class, lalu tinggal tambah atau hapus class itu lewat JavaScript. Property classList dibuat persis untuk keperluan ini:

const kotak = document.querySelector(".kotak");

kotak.classList.add("active");      // pasang class "active"
kotak.classList.remove("active");   // lepas class-nya
kotak.classList.toggle("active");   // pasang kalau belum ada, lepas kalau sudah ada

toggle ini benar-benar praktis — beginilah cara kerja tombol “dark mode” atau tombol “tampilkan/sembunyikan”. Tampilannya kamu tulis di CSS (.active { ... }), lalu tugas JavaScript tinggal menghidupkan dan mematikan class-nya. Dengan begitu urusan tampilan tetap ada di CSS sebagaimana mestinya, sementara JavaScript-mu bisa berkonsentrasi pada logika.

Membuat dan menghapus elemen

DOM bukan cuma soal mengubah elemen yang sudah ada — kamu juga bisa membuat elemen baru dari nol lalu menempelkannya ke halaman. Polanya terdiri dari tiga langkah: buat, atur isinya, lalu pasang:

const daftar = document.querySelector("ul");

const itemBaru = document.createElement("li");   // 1. buat elemen <li>
itemBaru.textContent = "Sebuah item baru";        // 2. isi kontennya
daftar.appendChild(itemBaru);                      // 3. pasang ke dalam daftar

Kode ini menambahkan satu <li> yang benar-benar baru ke halaman, langsung saat itu juga. Begini juga cara kerja konten dinamis — menambah pesan baru di sebuah chat, baris baru di sebuah tabel, atau produk baru di sebuah daftar. Sebaliknya, kamu juga bisa menghapus elemen:

const itemLama = document.querySelector(".selesai");
itemLama.remove();   // membuang elemen ini dari halaman

Begitu digabung dengan perulangan dan array dari artikel-artikel sebelumnya, kemampuan ini jadi luar biasa kuat: kamu tinggal punya satu array berisi data, lalu dari situ seluruh daftar elemen bisa dibangkitkan sekaligus.

Menyatukannya

Sekarang mari kita rangkai sesuatu yang utuh dan terasa nyata — mengambil sebuah daftar data, lalu menampilkannya ke halaman:

const buah = ["Apel", "Pisang", "Ceri"];
const daftar = document.querySelector("#daftar-buah");

buah.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = item;
  daftar.appendChild(li);
});

Kode ini menelusuri array buah, membuatkan satu <li> untuk tiap isinya, mengisi teksnya, lalu memasangnya ke daftar di halaman. Hasil akhirnya: sebuah daftar yang seolah-olah dirakit langsung dari datamu. Pola inilah — data ditaruh di sebuah array, lalu ditelusuri untuk membangun elemen DOM — yang jadi fondasi cara hampir semua website dinamis menampilkan kontennya. Tanpa sadar kamu baru saja menyatukan semuanya: array, perulangan, fungsi, dan DOM, menjadi satu fitur utuh yang benar-benar berjalan.

Penutup

DOM adalah titik temu antara JavaScript dan halamanmu, dan sekarang kamu sudah bisa bekerja dengannya:

• DOM adalah HTML-mu yang diwujudkan sebagai objek yang bisa dibaca dan diubah JavaScript; semuanya berangkat dari objek document.
• querySelector (mengambil yang pertama cocok) dan querySelectorAll (mengambil semua yang cocok) mencari elemen lewat selector CSS yang sudah kamu kuasai.
• Ganti konten lewat textContent (atau innerHTML kalau butuh tag), dan ubah tampilan lewat .style (dengan penulisan camelCase).
• Andalkan classList (add, remove, toggle) untuk menyalakan dan mematikan class CSS yang sudah kamu siapkan — biar urusan tampilan tetap di CSS dan logika tetap di JavaScript.
• createElement + appendChild untuk merakit elemen baru; .remove() untuk membuangnya — inilah dasar dari konten dinamis.
• Menelusuri data untuk membangun elemen DOM adalah pola utama di balik halaman yang dinamis.

Mulai sekarang kamu sudah sanggup membaca sekaligus membentuk ulang halaman lewat kode. Satu bagian terakhir yang menyambungkan semuanya ke pengguna adalah event — cara halaman menanggapi klik, ketikan, dan beragam interaksi lain. Itu jadi artikel penutup di section ini, dan di sanalah halamanmu benar-benar berubah jadi interaktif, ikut merespons apa pun yang dilakukan pengguna.