Dalang di Balik Layar: DOM Manipulation
Selamat! Kamu sudah menguasai seluruh tata bahasa dasar (Tipe Data, If/Else, Loop, Function). Kini saatnya
kita keluar dari dunia rahasia "Console Log" dan mulai bermain sihir sungguhan: Mengendalikan
Tampilan Halaman Web secara Live.
JavaScript punya akses istimewa ke elemen HTML melalui sebuah pohon struktural yang disebut DOM
(Document Object Model). Melalui DOM, JS bisa mengambil text, mengubah warna, hingga
menciptakan dan menghapus kotak HTML langsung di hadapan mata pengguna layaknya seorang Dalang Wayang.
🎣 1. Memancing Elemen (DOM Selectors)
Sebelum kamu bisa mengutak-atik judul atau tombol, kamu harus memerintahkan JS untuk "memancing/Mencari" elemen
tersebut dan menyimpannya ke dalam sebuah Variabel. Layaknya mencari buku di perpustakaan besar,
document.querySelector adalah mesin pancing utamamu.
HTML Asli
<h1 id="judul-utama">Toko JS</h1>
<button class="btn-beli">Beli Baju</button>
<button class="btn-beli">Beli Sepatu</button>
JS Menangkapnya
// 1. Menangkap element berdasarkan ID (#)
const h1 = document.querySelector('#judul-utama');
// 2. Menangkap SATU element Class (.) pertama
const tombolPertama = document.querySelector('.btn-beli');
// 3. Menangkap SEMUA element Class (.) ke dalam Array
const semuaTombol = document.querySelectorAll('.btn-beli');
Tips: Sintaks di dalam kurung querySelector 100% menggunakan aturan
pemanggilan CSS. Pakai # untuk ID, dan . untuk nama Class!
🎨 2. Mengubah Teks & Gaya (Class)
Begitu elemennya masuk ke kolam Variabel kita, mesin sihirmu siap digunakan. Kamu bisa mengganti isi tulisannya, menambahkan teks tebal otomatis, hingga menembakkan warna-warna cantik lewat manipulasi nama Class Tailwind!
const kotakInfo = document.querySelector('#pengumuman');
// Mengubah Teks Saja
kotakInfo.textContent = "Sedang memuat data keranjang...";
// Mengubah Teks + Injeksi HTML (Bikin Tebal/Warna)
kotakInfo.innerHTML = "Diskon <span class='text-red-500'>90%</span> Hari Ini!";
// Menambah/Menghapus class Tailwind (Biasa utk Dark Mode)
kotakInfo.classList.add('bg-slate-900', 'text-white');
kotakInfo.classList.remove('hidden');
Kamus Cheat-Sheet: Jurus DOM
| Perintah JS (Sintaks) | Fungsi & Kegunaan Utama | Kategori Efek |
|---|---|---|
.textContent
|
Mengambil atau menimpa Teks tulisan utuh. Segala tag HTML akan mati dan dianggap sebagai teks mentah (Paling aman dari Hecker/XSS). | Tulisan & Konten |
.innerHTML
|
Sama seperti textContent, tapi ia menerjemahkan tag HTML secara Live! (Cocok untuk menyisipkan teks tebal/warna baru dari Javascript). | Tulisan & Konten |
.classList.add().classList.remove()
|
Mengatur gaya visual secara instan dengan menyuntikkan atau merobek nama Class CSS (Tailwind). Sangat berguna untuk Dark Mode & Modals. | Gaya & Properti |
.setAttribute()
|
Merubah ciri atribut benda spesifik, contoh:
Merubah url target (href) pada Link, atau mengganti sumber foto
(src) secara dinamis. |
Gaya & Properti |
document.createElement()
|
Jurus memanggil dari kehampaan: Menciptakan Tag HTML baru (kotak/h1/tombol tak bernyawa) dan menyimpannya di alam Ghoib (Variabel) sebelum di tempel. | Kreasi & Lenyap |
.appendChild()
|
Menempelkan elemen ghoib ciptaan baru (atau elemen diculik) masuk ke dalam posisi akhir (sebagai anak bungsu) dari perut elemen bapaknya. | Kreasi & Lenyap |
.remove()
|
Jurus pemusnah massal: Membuang / melenyapkan elemen beserta seluruh seluk beluk isi perutnya dari layar monintor! (Contoh: Menghapus item dari Keranjang). | Pemusnahan |
👂 3. Menanam Telinga Sensor (Event Listener)
Interaksi hanya terjadi jika komputermu sadar bahwa ada sentuhan/klikan dari user. Dengan
.addEventListener(), kamu "memasang telinga gaib" pada sebuah tombol. Telinga ini akan diam manis
dan baru akan mengeksekusi Fungsimu secar otomatis saat sang user mengklik tombol tersebut.
📦 Studi Kasus Lengkap: Tombol Counter Beli
Kode Program
// 1. Tangkap dulu elemennya
const tombolOrder = document.querySelector('#btn-order');
const teksJumlah = document.querySelector('#angka');
// 2. Siapkan wadah untuk berhitung (Boleh diubah = let)
let keranjang = 0;
// 3. Pasang telinga peringatan 'click'
tombolOrder.addEventListener('click', function() {
// a. Angkanya dinaikkan 1 (+1)
keranjang++;
// b. Perbarui teks di layar dengan angka terbaru
teksJumlah.textContent = keranjang;
// c. Ekstra: Jadikan warna teks merah merona
teksJumlah.classList.add('text-red-500');
});
Hasil Render Web Asli (Visualisasi Mockup)
*Coba klik tombol di atas! Kode JavaScript asli saya pasangkan di baliknya.