DOM di JavaScript dan Cara Mengendalikan Halaman Web

Sejauh ini semua programmu hidup di console: input ditulis manual di kode, output dibaca sebagai teks. Tapi website yang dipakai orang tidak seperti itu. Ada tombol yang bisa diklik, teks yang berubah sendiri, daftar yang bertambah tanpa reload halaman.

Di artikel sebelumnya kita belajar menyimpan banyak data dengan array dan object. Sekarang pertanyaan serunya: bagaimana data itu ditampilkan di halaman web, dan bagaimana JavaScript bisa mengubah halaman setelah ia dimuat? Jawabannya adalah DOM, singkatan dari Document Object Model. Ini jembatan paling seru di seri JavaScript Basic: dari sinilah web yang statis berubah jadi web yang hidup.

Di akhir artikel ini kamu bisa "menggapai" elemen HTML dari JavaScript, mengubah teks dan tampilannya, bahkan menciptakan elemen baru yang belum ada saat halaman pertama dibuka.

DOM Itu Peta yang Dibikin Browser

Analogi dulu. Bayangkan browser menerima file HTML mentah, lalu menggambar peta dari isinya: "di sini ada body, di dalamnya ada h1 berjudul X, ada tombol berlabel Y". Peta inilah yang disebut DOM. Ia bukan HTML-nya (HTML cuma teks di file), melainkan representasi hidup dari halaman yang sedang dibuka, yang bisa dibaca dan diubah oleh JavaScript.

Strukturnya seperti pohon keluarga: document adalah kakek tertua, di bawahnya ada html, lalu head dan body, lalu anak-anaknya lagi. Setiap "kotak" di peta ini disebut node atau elemen.

JavaScript mengakses peta ini lewat objek global bernama document. Objek ini sudah tersedia otomatis di setiap halaman web, tidak perlu diimpor atau disiapkan. Tugas pertamamu: belajar menyeleksi elemen, alias menunjuk "saya mau yang itu".

Menyeleksi Elemen: Menunjuk Targetmu

Ada beberapa cara menyeleksi, tapi untuk pemula cukup kuasai dua yang paling serbaguna:

• document.getElementById("judul"): cari elemen yang punya id="judul". Cepat dan spesifik, tapi id harus unik di satu halaman.
• document.querySelector(".tombol"): cari elemen pertama yang cocok dengan CSS selector. Titik untuk class (.tombol), pagar untuk id (#judul), nama tag langsung untuk tag (p).

<h1 id="judul">Halo Dunia</h1>
<button class="tombol">Klik Saya</button>

<script>
let judul = document.getElementById("judul");
let tombol = document.querySelector(".tombol");
</script>

Kenapa querySelector layak jadi favoritmu? Karena ia memakai bahasa yang sama dengan CSS yang sudah kamu pelajari di seri CSS Basic. Satu bahasa selektor untuk styling dan untuk scripting. Kalau butuh semua yang cocok (bukan cuma yang pertama), ada kembarannya: querySelectorAll.

Satu peringatan penting: kalau selektormu tidak cocok dengan elemen mana pun, hasilnya null. Dan memanggil null.textContent akan error. Jadi kalau kodemu error "cannot read properties of null", hal pertama yang dicek: apakah selektornya benar dan elemennya sudah dimuat saat script dijalankan.

<ul>
  <li class="item">Apel</li>
  <li class="item">Mangga</li>
</ul>
<script>
let el = document.querySelector(".item");
</script>

Mengubah Isi dan Tampilan

Setelah elemen terseleksi, kamu bisa mengubahnya. Tiga properti yang paling sering dipakai:

• textContent: ganti teks di dalamnya. Aman, karena teks diperlakukan murni sebagai teks.
• innerHTML: ganti isi HTML-nya, termasuk tag. Powerful tapi berbahaya kalau isinya berasal dari input pengguna (bisa disusupi script jahat).
• style: ubah tampilan langsung, misalnya el.style.color = "red".

let judul = document.getElementById("judul");
judul.textContent = "Halo JavaScript!";
judul.style.color = "#E8590C";

Aturan main di dapur ini: pakai textContent untuk teks biasa, simpan innerHTML untuk saat kamu memang sengaja ingin menyisipkan tag HTML. Kebiasaan ini melindungimu dari lubang keamanan XSS (Cross-Site Scripting) yang akan kamu pelajari jauh nanti. Mumpung masih awal, biasakan yang aman.

<p id="info"></p>
<script>
let p = document.getElementById("info");
p.textContent = "<strong>Penting!</strong>";
</script>

Dua Persepsi yang Sering Salah

Pertama: "DOM itu bagian dari bahasa JavaScript." Bukan. DOM adalah fasilitas browser. Buktinya: kalau kamu menjalankan JavaScript di Node.js (nanti di seri backend), tidak ada document di sana dan kodemu error. JavaScript-nya sama, "dapur"-nya beda. Ini penting dipahami supaya kamu tidak bingung saat pindah environment.

Kedua: "mengubah DOM itu lambat dan harus dihindari." Untuk skala belajar dan aplikasi kecil, mengubah DOM langsung itu baik-baik saja. Framework seperti React memang punya teknik optimasi, tapi itu solusi untuk masalah skala besar. Jangan biarkan ketakutan performa menghambatmu belajar dasarnya. Kuasai dulu cara manualnya, optimasi menyusul.

Menciptakan Elemen dari Nol

Bagian paling ajaib: JavaScript tidak cuma bisa mengubah yang sudah ada, tapi juga menciptakan elemen baru yang tidak tertulis di file HTML sama sekali. Polanya selalu tiga langkah: bikin, isi, tempel.

// 1. Bikin elemen baru (masih melayang, belum tampil)
let itemBaru = document.createElement("li");
// 2. Isi kontennya
itemBaru.textContent = "Durian";
// 3. Tempel ke elemen yang sudah ada di halaman
let daftar = document.getElementById("daftar-buah");
daftar.appendChild(itemBaru);

Perhatikan langkah 1 dan 3: createElement hanya membuat elemen di memori, ia belum tampil di mana-mana. Elemen baru tampil hanya setelah ditempelkan ke DOM dengan appendChild. Lupa langkah 3 adalah bug klasik "kok elemennya tidak muncul padahal sudah dibikin". Tiga langkah ini, bikin-isi-tempel, adalah pola yang akan kamu ulang ratusan kali dalam kariermu. Hafalkan iramanya.

Pasangan dari appendChild adalah remove(): cara menghapus elemen dari halaman. document.querySelector(".item").remove() akan mencabut elemen itu dari DOM seketika. Gabungkan keduanya dan kamu sudah punya operasi dasar aplikasi dinamis: tambah dengan create-tempel, kurangi dengan remove. Di proyek to-do list artikel berikutnya, dua operasi inilah yang dipakai untuk menambah dan menghapus tugas.

Latihan: Ubah, Jangan Cuma Dibaca

Latihan kali ini butuh file HTML sungguhan. Bikin file latihan.html dengan struktur dasar, lalu:

1. Ubah teks dengan tombol (tanpa function baru). Bikin satu h1 dan satu tombol. Saat tombol diklik (pakai atribut onclick di HTML untuk sekarang), ubah textContent h1-nya jadi teks versimu. Setelah berhasil, ubah lagi: jangan cuma ganti teks, ganti juga warnanya lewat style.
2. Bikin daftar dinamis. Bikin ul kosong dan array 5 nama temanmu di JavaScript. Pakai loop for...of + pola bikin-isi-tempel untuk mengisi ul tersebut otomatis. Tidak boleh menulis li-nya manual di HTML.
3. Ubah jadi daftar bernomor ganjil saja. Modifikasi latihan nomor 2: hanya tempel nama yang index-nya genap (0, 2, 4), dan beri class CSS berbeda untuk item pertama. Ini melatihmu menggabungkan seleksi, loop, kondisi, dan DOM sekaligus.

Catatan: kita memakai onclick di HTML untuk sementara. Di artikel berikutnya kamu akan belajar cara yang lebih rapi: addEventListener.

Habis Ini ke Mana?

Sekarang kamu bisa mengubah halaman seenaknya dari JavaScript. Tapi halaman yang berubah sendiri tanpa dipicu apa-apa itu aneh. Yang kita mau: halaman merespons pengguna. Tombol diklik, daftar bertambah. Teks diketik, hasil muncul.

Itulah menu penutup seri JavaScript Basic: Event dan Proyek Aplikasi To Do List. Kamu akan belajar mendengarkan aksi pengguna dengan addEventListener, lalu menggabungkan SEMUA yang dipelajari di seri ini (variabel, kondisi, loop, function, array, DOM) jadi satu aplikasi nyata. Siapkan cemilan, ini bagian paling memuaskan.