Jembatan Antara JavaScript dan HTML

Saat kamu menulis file HTML, browser akan membaca file tersebut dari atas ke bawah. Browser tidak hanya menampilkan teks, tapi juga mengubah struktur HTML tersebut menjadi sebuah model peta logika di dalam memorinya. Peta logika inilah yang disebut dengan DOM (Document Object Model).

DOM berbentuk seperti pohon keluarga (Tree). Tag adalah akarnya. Di dalamnya bercabang menjadi dan . Di dalam body bercabang lagi menjadi

,

,

, dan seterusnya.

Kenapa DOM itu penting?

JavaScript murni (engine-nya) sebenarnya hanya tahu soal logika: tambah-tambahan, loop, variabel. JavaScript murni tidak tahu apa itu warna merah atau apa itu sebuah tombol.

Agar JavaScript bisa mengubah teks di layar, menyembunyikan elemen, atau bereaksi saat tombol diklik, browser menyediakan API (antarmuka) yaitu DOM. Melalui DOM, JavaScript "memiliki kekuatan" untuk menyentuh dan memodifikasi HTML secara live tanpa perlu me-refresh halaman.

Cara JavaScript Memanipulasi DOM

Proses memanipulasi web melalui DOM biasanya melewati tiga tahapan utama: Mencari, Mengubah, Mendengarkan.

1. Mencari Elemen (Selecting)

Sebelum diubah, elemen HTML-nya harus dicari dulu menggunakan method DOM.

// Mencari tombol berdasarkan ID-nya
const btnSubmit = document.getElementById('btn-submit');

// Mencari elemen pertama yang memiliki class 'text-error'
const errorMessage = document.querySelector('.text-error');

2. Mengubah Elemen (Manipulating)

Setelah elemen dipegang oleh variabel, kita bisa memodifikasinya sesuka hati.

// Mengubah teks di dalamnya
errorMessage.textContent = "Password terlalu pendek!";

// Mengubah style CSS langsung
errorMessage.style.color = "red";

3. Mendengarkan Aksi (Event Listening)

Ini adalah bagian di mana web menjadi interaktif. Kita menyuruh DOM untuk "mengawasi" elemen tertentu, dan menjalankan sebuah fungsi saat ada interaksi (seperti klik).

btnSubmit.addEventListener('click', function() {
  alert('Tombol berhasil diklik!');
});

Framework Modern (React/Vue) dan Virtual DOM

Memanipulasi DOM secara langsung satu per satu (seperti di atas) disebut Vanilla JavaScript. Cara ini baik untuk belajar, tapi jika webnya sudah sebesar Facebook, cara ini menjadi lambat dan berantakan.

Itulah sebabnya muncul framework seperti React yang memperkenalkan Virtual DOM. Daripada menyentuh DOM asli setiap saat, React memanipulasi copy-an DOM di dalam memori, lalu melakukan pembaruan ke DOM asli secara borongan (batch) agar lebih cepat.