Konsep Dasar 25 Artikel ⏱️ Estimasi Waktu Baca: 4 menit

Kamus JavaScript (Bagian 4): Memanipulasi HTML dengan DOM

Halo Sobat Jurnal Coding! Jika kamu sudah mengikuti tutorial dari awal, kamu pasti sudah jago membuat kerangka website menggunakan HTML, dan menghiasnya menggunakan CSS agar terlihat cantik.

Namun, ada satu masalah besar: Website yang hanya dibuat menggunakan HTML dan CSS adalah website yang "mati". Ya, mati. Dia tidak bisa merespons, tidak bisa berpikir, dan teksnya akan selalu diam di sana selamanya sampai kiamat tiba.

Di sinilah JavaScript datang sebagai sang penyelamat. JavaScript adalah nyawa atau "listrik" dari sebuah website. Masalahnya, bagaimana caranya si listrik (JavaScript) ini bisa menyentuh dan mengubah si kerangka (HTML)?

Inilah saatnya kita berkenalan dengan sihir terhebat di dunia web development: **DOM (Document Object Model)**.

### Analogi Dalang dan Wayang Kulit

Untuk memahami DOM, bayangkan sebuah pertunjukan wayang kulit.
HTML dan CSS adalah wayang-wayangnya. Mereka sudah dicat indah dan memiliki bentuk yang jelas, tetapi mereka hanya bisa tergeletak diam di dalam kotak.
Nah, JavaScript adalah sang Dalang. Sang Dalang punya pikiran, punya niat, dan punya logika pergerakan.

Tapi sang Dalang tidak bisa menggerakkan wayang secara gaib dari jarak jauh. Dia butuh **tali dan kayu pengait** yang diikatkan ke tangan dan kaki si wayang. Di dunia pemrograman web, "tali dan kayu pengait" itulah yang disebut dengan **DOM**.

Saat browser (seperti Google Chrome) memuat file HTML-mu, ia akan otomatis membuat replika tak terlihat berupa silsilah keluarga dari kodemu. Silsilah keluarga tak terlihat inilah (DOM) yang akan ditarik dan dimanipulasi oleh JavaScript untuk membuat website-mu menari!

Mari kita pelajari 3 jurus sihir utama sang Dalang:

### Sihir 1: Memanggil Nama Wayang (Menangkap Elemen)

Sebelum sang Dalang bisa menggerakkan wayang, dia harus tahu wayang mana yang mau digerakkan. Di HTML, kita biasa memberikan nama panggilan pada elemen menggunakan `id="namanya"`. Di JavaScript, kita memanggilnya dengan perintah `document.getElementById()`.

// Anggap di HTML kamu ada: Halo Dunia

// Sang dalang menangkap elemen H1 tersebut dan menggenggamnya

const judul = document.getElementById("judul-web");

// Mengubah teksnya di depan mata pembaca tanpa loading ulang!

judul.innerText = "Selamat Datang di Jurnal Coding!";

### Sihir 2: Mengganti Baju Wayang (Mengubah Style / Dark Mode)

Sihir DOM tidak hanya bisa mengubah teks, tetapi juga bisa merias ulang elemen tersebut dengan mengubah kode CSS-nya secara real-time. Pernahkah kamu mengeklik sebuah tombol bergambar bulan sabit di suatu website, lalu tiba-tiba seluruh websitenya berubah menjadi gelap (Dark Mode)?

Percaya atau tidak, fitur semahal dan sekeren itu hanya bermodalkan 1 baris kode DOM sederhana! Kita cukup mengubah properti `style` dari elemen body.

// Menangkap seluruh elemen layar (body)

const layar = document.body;

// Fungsi untuk menyalakan Dark Mode

function nyalakanDarkMode() {

    layar.style.backgroundColor = "#121212"; // Latar belakang hitam

    layar.style.color = "#ffffff";           // Teks jadi putih

    alert("Dark Mode Aktif! Mata kamu sekarang aman.");

}

### Sihir 3: Menciptakan Wayang Baru dari Udara Kosong (Create Element)

Ini adalah sihir tingkat tinggi. Dalang yang hebat tidak hanya memainkan wayang yang sudah ada, tapi dia bisa menciptakan wayang baru dari ketiadaan di tengah pertunjukan.

Pernahkah kamu memposting komentar di Instagram atau Twitter? Saat kamu menekan tombol "Kirim", komentarmu tiba-tiba muncul di baris paling bawah. Instagram tidak memuat ulang (refresh) halamannya. Mereka menggunakan DOM untuk "menciptakan" elemen kotak komentarmu secara instan!

// 1. Menciptakan elemen paragraf  kosong dari udara

const paragrafBaru = document.createElement("p");

// 2. Mengisi paragraf tersebut dengan teks

paragrafBaru.innerText = "Ini adalah komentar baru buatan JavaScript!";

// 3. Menyisipkannya ke dalam halaman HTML agar terlihat

// (Anggap saja kita menempelkannya ke dalam div ber-ID "kolom-komentar")

const kotakKomentar = document.getElementById("kolom-komentar");

kotakKomentar.appendChild(paragrafBaru);

### Kesimpulan: Kamu Adalah Sang Dalang

Menyadari apa yang bisa dilakukan DOM adalah titik balik terbesar bagi sebagian besar programmer pemula (termasuk saya dulu). Ada sensasi kepuasan luar biasa saat kamu menyadari bahwa kamu memegang kendali penuh atas halaman webmu.

Website bukan lagi sekadar poster digital statis yang kaku, melainkan sebuah aplikasi hidup yang bernapas, merespons klik, dan bisa berubah bentuk sesuai kehendak kodemu. Kuasai DOM, dan tidak ada batasan untuk apa yang bisa kamu bangun di internet!