Belajar Manipulasi DOM JavaScript untuk Pemula

Pendahuluan

Halo, rekan developer! Senang sekali kamu bisa melanjutkan perjalanan belajar kita. Pada artikel sebelumnya, kita sudah berhasil menguasai logika pemrograman menggunakan function dan arrow function. Kamu sudah belajar bagaimana membuat otak dari sebuah aplikasi. Namun, sebuah aplikasi tidak akan ada artinya jika kita tidak bisa menampilkan hasil pemikiran tersebut ke layar pengguna.

Bayangkan kamu sedang membuat aplikasi seperti Tokopedia. Saat kamu mengklik tombol “Tambah ke Keranjang”, angka di ikon keranjang berubah secara otomatis tanpa perlu me-refresh seluruh halaman, bukan? Nah, keajaiban itulah yang disebut dengan DOM Manipulation.

Dalam artikel ini, kita akan mempelajari cara menjembatani logika JavaScript yang sudah kita buat dengan struktur HTML yang ada. Kita akan belajar cara mengambil elemen HTML, mengubah isinya, mengubah gaya (CSS)-nya, hingga membuat elemen baru secara dinus secara dinamis. Semua teknik ini akan kita terapkan langsung ke dalam proyek Aplikasi Kuis Interaktif kita, sehingga kuis yang kita buat tidak lagi statis, melainkan bisa berubah pertanyaan dan skornya secara real-time.

Apa itu DOM?

Sebelum masuk ke kode, kita harus paham apa itu DOM (Document Object Model). Saat browser memuat halaman HTML, browser akan membuat sebuah representasi struktur pohon (tree structure) dari dokumen tersebut. Setiap elemen HTML, atribut, hingga teks di dalamnya menjadi sebuah “node” atau objek yang bisa kita akses menggunakan JavaScript.

Tanpa DOM, JavaScript hanyalah bahasa pemrograman yang berjalan di belakang layar tanpa bisa berinteraksi dengan apa yang dilihat pengguna. Dengan DOM, JavaScript memiliki “tangan” untuk menyentuh, mengubah, dan memanipulasi elemen di layar.

1. Memilih Elemen (Selecting Elements)

Langkah pertama dalam manipulasi DOM adalah menemukan elemen mana yang ingin kita ubah. Di JavaScript, kita memiliki beberapa metode populer untuk melakukan ini.

`getElementById`

Metode paling cepat dan efisien jika kita sudah memiliki id yang unik pada elemen tersebut.

// Mengambil elemen berdasarkan ID
const judulKuis = document.all.getElementById('quiz-title'); 
// Catatan: Gunakan document.getElementById
const mainTitle = document.getElementById('title');

console.log(mainTitle.textContent); // Menampilkan isi teks dari elemen tersebut

`querySelector` dan `querySelectorAll`

Ini adalah metode yang paling fleksibel karena kita bisa menggunakan selector yang sama seperti di CSS (class, tag, atau kombinasi).

// Memilih elemen berdasarkan class
const tombolNext = document.querySelector('.btn-next');

// Memilih semua elemen dengan class 'jawaban-button'
const semuaTombol = document.querySelectorAll('.answer-btn');

// Kita bisa melakukan looping pada querySelectorAll
semuaTombol.forEach((button) => {
    console.log("Menemukan tombol: ", button.innerText);
});

2. Mengubah Konten dan Atribut (Modifying Elements)

Setelah kita berhasil “menangkap” elemennya, langkah selanjutnya adalah mengubah isinya. Dalam aplikasi kuis kita, kita perlu mengubah teks pertanyaan setiap kali pengguna menjawab.

Mengubah Teks (`textContent` & `innerHTML`)

Ada perbedaan penting antara textContent dan innerHTML. textContent hanya mengubah teks murni, sedangkan innerHTML memungkinkan kita memasukkan tag HTML baru.

const areaPertanyaan = document.squerySelector('#question-text');

// Mengubah teks saja (lebih aman dari serangan XSS)
areaPertanyaan.textContent = "Apa ibukota Indonesia?";

// Mengubah dengan menyertakan tag HTML (gunakan dengan hati-hati)
areaPertanyaan.innerHTML = "Apa <strong>ibukota</strong> Indonesia?";

Mengubah Class dan Style (`classList` & `style`)

Kita bisa mengubah tampilan elemen, misalnya memberikan warna merah pada jawaban yang salah.

const elemenJawaban = document.querySelector('.answer-btn');

// Menambah class CSS baru
elemenJawaban.classList.add('correct-answer');

// Menghapus class
elemenJawaban.classList.remove('wrong-answer');

// Mengubah style langsung (inline style)
elemenJawaban.style.backgroundColor = "green";
elemenJawaban.style.color = "white";

3. Membuat Elemen Baru (Creating Elements)

Dalam aplikasi kuis, jumlah pilihan jawaban bisa berbeda-beda setiap pertanyaan. Kita tidak boleh menulis semua tombol jawaban secara manual di HTML. Kita harus membuatnya secara dinamis menggunakan JavaScript.

// 1. Buat elemen baru (misal: button)
const tombolBaru = document.createElement('button');

// 2. Berikan konten/isi
tombolBaru.textContent = "Pilihan Jawaban Baru";
tombolBaru.classList.add('btn-answer');

// 3. Cari tempat untuk menempelkan elemen ini (container)
const containerJawaban = document.querySelector('#answer-container');

// 4. Tempelkan ke dalam DOM
containerJawaban.appendChild(tomtomBaru);

Implementasi dalam Proyek

Mari kita terapkan semua konsep di atas ke dalam potongan kode inti dari Aplikasi Kuis Interaktif kita. Di sini, kita akan membuat fungsi yang bisa merender pertanyaan dan pilihan jawaban secara otomatis.

// Data kuis (seolah-olah dari database)
const dataKuis = [
    {
        pertanyaan: "Berapa harga satu porsi nasi goreng di warung Budi?",
        pilihan: ["Rp 10.000", "Rp 15.000", "Rp 20.000", "Rp 25.000"],
        jawabanBenar: 1 // Index ke-1 (Rp 15.000)
    },
    {
        pertanyaan: "Platform pembayaran apa yang sering digunakan di Indonesia?",
        pilihan: ["Gojek/GoPay", "BCA Mobile", "Tokopedia", "Semua Benar"],
        jawabanBenar: 3
    }
];

let indexSekarang = 0;

// Referensi elemen DOM
const textPertanyaan = document.querySelector('#question-text');
const containerJawaban = document.querySelector('#answer-container');

// Fungsi untuk menampilkan pertanyaan
function tampilkanPertanyaan() {
    // 1. Bersihkan container jawaban lama agar tidak menumpuk
    containerJawaban.innerHTML = "";

    // 2. Ambil data pertanyaan saat ini
    const data = dataKuis[indexSekarang];

    // 3. Ubah teks pertanyaan di HTML
    textPertanyaan.textContent = data.pertanyaan;

    // 4. Loop pilihan jawaban dan buat tombol secara dinamis
    data.pilihan.forEach((pilihan, index) => {
        const tombol = document.createElement('button');
        tombol.textContent = pilihan;
        tombol.classList.add('btn-answer');
        
        // Tambahkan event listener untuk mengecek jawaban
        tombol.addEventListener('click', () => cekJawaban(index));

        // Masukkan tombol ke dalam container
        containerJawran.appendChild(tombol);
    });
}

function cekJawaban(indeksDipilih) {
    if (indeksDipilih === dataKuis[indexSekarang].jawabanBenar) {
        alert("Hebat! Jawaban kamu benar.");
    } else {
        alert("Yah, coba lagi ya!");
    }
}

// Jalankan fungsi pertama kali
tampilkanPertanyaan();

Kesimpulan

Manipulasi DOM adalah jantung dari pembuatan website interaktif. Tanpa manipulasi DOM, website hany-hanya akan menjadi dokumen statis yang membosankan. Dengan memahami cara memilih elemen (querySelector), mengubah konten (textContent), dan merespon aksi pengguna (addEventListener), Anda sudah memiliki modal kuat untuk membangun aplikasi web yang kompleks.

Tips Pro

Gunakan textContent daripada innerHTML jika Anda hanya ingin mengubah teks biasa. Ini lebih aman dari serangan Cross-Site Scripting (XSS).
Selalu bersihkan container sebelum melakukan render ulang elemen (seperti penggunaan innerHTML = '') agar elemen lama tidak menumpuk dan menyebabkan kebocoran memori.
Gunakan classList.add atau classList.toggle daripada mengubah style secara langsung agar kode CSS Anda tetap rapi dan terpisah dari logika JavaScript.

Langkah berikutnya: Menambah Interaktivitas dengan Event Listener JavaScript — pelajari cara merespons klik, input, dan event keyboard dari pengguna secara lebih canggih.