📌 Pendahuluan

Salah satu kemampuan paling penting bagi pengembang web adalah bagaimana berinteraksi dengan elemen HTML secara dinamis. Di sinilah DOM Manipulation (Document Object Model) berperan.

Artikel ini akan membantu kamu memahami konsep dasar DOM, serta bagaimana kamu bisa mengambil, mengubah, menambahkan, dan menghapus elemen HTML menggunakan JavaScript murni — tanpa framework.

🧠 1. Apa Itu DOM?

DOM adalah representasi struktur halaman HTML sebagai pohon objek (tree of objects). Setiap tag HTML seperti <div>, <h1>, dan <p> menjadi objek yang bisa kamu akses dan manipulasi menggunakan JavaScript.

Misalnya:

<body>
  <h1 id="judul">Halo Dunia!</h1>
</body>

Melalui DOM, kamu bisa mengganti teks Halo Dunia! menjadi apapun yang kamu inginkan secara dinamis.

🔍 2. Cara Mengakses Elemen DOM

Beberapa metode populer untuk mengambil elemen HTML:

document.getElementById('judul');            // Berdasarkan ID
document.querySelector('h1');                // Berdasarkan selector
document.getElementsByClassName('title');    // Berdasarkan class
document.getElementsByTagName('p');          // Berdasarkan tag

Contoh penggunaan:

const judul = document.getElementById('judul');
judul.textContent = 'Selamat Datang!';

🔧 3. Mengubah Konten & Atribut

Selain membaca, kamu bisa mengubah elemen secara langsung.

judul.style.color = 'blue';
judul.innerHTML = '<em>Hai!</em>';
judul.setAttribute('class', 'highlight');

Ini memungkinkan kamu mengubah gaya, struktur HTML, atau menambahkan atribut baru.

🛠️ 4. Menambahkan dan Menghapus Elemen

Kamu bisa membuat elemen HTML baru dengan createElement() dan menambahkannya ke halaman menggunakan appendChild() atau insertBefore().

const newItem = document.createElement('li');
newItem.textContent = 'Item Baru';
document.querySelector('ul').appendChild(newItem);

Menghapus elemen:

document.querySelector('li').remove();

🎯 5. Event Listener: Interaksi Pengguna

DOM juga memungkinkan kamu menangani event, seperti klik, input, atau hover.

const tombol = document.getElementById('klikSaya');
tombol.addEventListener('click', function () {
  alert('Tombol diklik!');
});

Event ini penting agar website kamu menjadi interaktif.

🧪 Studi Kasus: To-Do List Sederhana

HTML:

<input type="text" id="taskInput">
<button id="addTask">Tambah</button>
<ul id="taskList"></ul>

JavaScript:

document.getElementById('addTask').addEventListener('click', function () {
  const input = document.getElementById('taskInput');
  const task = document.createElement('li');
  task.textContent = input.value;
  document.getElementById('taskList').appendChild(task);
  input.value = '';
});

Dengan beberapa baris JavaScript saja, kamu sudah bisa membuat fitur tambah-tugas yang interaktif!

📘 Kesimpulan

Menguasai DOM adalah fondasi penting sebelum kamu melangkah ke framework seperti React atau Vue. Dengan memahami bagaimana HTML dan JavaScript bekerja secara langsung, kamu akan menjadi web developer yang lebih solid dan fleksibel.

Memanipulasi DOM dengan JavaScript: Dasar yang Harus Dikuasai Web Developer Pemula