Cara Manipulasi DOM dengan JavaScript

DOM (Document Object Model) adalah representasi struktur halaman HTML dalam bentuk pohon objek yang bisa diakses dan dimanipulasi menggunakan JavaScript. Dengan memanipulasi DOM, kita bisa mengubah konten halaman, menambah atau menghapus elemen, mengubah style, dan merespons interaksi pengguna — semua tanpa perlu me-reload halaman. Inilah inti dari web yang interaktif dan dinamis.

Memilih Elemen DOM

Langkah pertama adalah memilih elemen yang ingin dimanipulasi. Ada beberapa cara yang bisa digunakan:

// getElementById — pilih berdasarkan ID (paling cepat)
const judulUtama = document.getElementById('judul');

// querySelector — pilih elemen pertama yang cocok (seperti CSS selector)
const tombolKirim = document.querySelector('#form button[type="submit"]');
const paragrafPertama = document.querySelector('p');

// querySelectorAll — pilih SEMUA elemen yang cocok (mengembalikan NodeList)
const semuaItem = document.querySelectorAll('.item-list li');
const semuaGambar = document.querySelectorAll('img');

// getElementsByClassName — pilih berdasarkan class
const kartu = document.getElementsByClassName('card');

console.log(judulUtama); // elemen <h1 id="judul">
console.log(semuaItem.length); // jumlah item yang ditemukan

Mengubah Konten Elemen

Setelah memilih elemen, kita bisa mengubah kontennya:

const judul = document.getElementById('judul');

// innerHTML — bisa menyisipkan HTML di dalamnya
judul.innerHTML = '<span class="highlight">Halo Dunia!</span>';

// textContent — hanya teks biasa, lebih aman dari serangan XSS
judul.textContent = 'Halo Dunia!';

// Mengubah nilai input
const inputNama = document.getElementById('nama');
inputNama.value = 'Budi Santoso';

// Mengubah atribut
const gambar = document.querySelector('img');
gambar.src = '/images/foto-baru.jpg';
gambar.alt = 'Foto baru yang keren';

Mengubah Style Elemen

Ada dua cara mengubah tampilan elemen: langsung lewat properti style, atau menambah/menghapus class CSS:

const kotak = document.getElementById('kotak');

// Cara 1: Ubah style langsung (camelCase, bukan kebab-case)
kotak.style.backgroundColor = '#3498db';
kotak.style.color = 'white';
kotak.style.padding = '20px';
kotak.style.borderRadius = '8px';

// Cara 2 (lebih direkomendasikan): Manipulasi class CSS
kotak.classList.add('aktif');       // Tambah class
kotak.classList.remove('tersembunyi'); // Hapus class
kotak.classList.toggle('fokus');    // Toggle (tambah jika belum ada, hapus jika sudah ada)

// Cek apakah elemen punya class tertentu
if (kotak.classList.contains('aktif')) {
  console.log('Kotak sedang aktif!');
}

Membuat dan Menambah Elemen Baru

Kita bisa membuat elemen baru dan memasukkannya ke dalam halaman:

// Buat elemen baru
const itemBaru = document.createElement('li');
itemBaru.textContent = 'Item ke-4';
itemBaru.classList.add('item-list');

// Tambahkan ke dalam elemen lain
const daftarUl = document.getElementById('daftar');
daftarUl.appendChild(itemBaru); // Tambah di akhir

// insertBefore — tambah sebelum elemen tertentu
const itemPertama = daftarUl.firstElementChild;
const itemSisipan = document.createElement('li');
itemSisipan.textContent = 'Item paling atas (disisipkan)';
daftarUl.insertBefore(itemSisipan, itemPertama);

// insertAdjacentHTML — cara cepat menyisipkan HTML
daftarUl.insertAdjacentHTML('beforeend', '<li class="item-list">Item terakhir</li>');

Menghapus Elemen

// Hapus elemen dari DOM
const itemHapus = document.getElementById('item-hapus');
itemHapus.remove(); // Modern dan langsung

// Cara lama (masih valid)
const parent = document.getElementById('daftar');
const child = parent.querySelector('.item-dihapus');
parent.removeChild(child);

Contoh Nyata: Daftar To-Do Sederhana

Mari gabungkan semua yang sudah dipelajari dalam contoh praktis:

// HTML yang diperlukan:
// <input id="input-todo" type="text" placeholder="Tambah tugas...">
// <button id="btn-tambah">Tambah</button>
// <ul id="daftar-todo"></ul>

const inputTodo = document.getElementById('input-todo');
const btnTambah = document.getElementById('btn-tambah');
const daftarTodo = document.getElementById('daftar-todo');

function tambahTugas() {
  const teks = inputTodo.value.trim();
  if (!teks) return; // Jangan tambah jika kosong

  const li = document.createElement('li');
  li.innerHTML = `
    <span>${teks}</span>
    <button class="btn-hapus">Hapus</button>
  `;

  // Tambahkan tombol hapus yang berfungsi
  li.querySelector('.btn-hapus').addEventListener('click', () => {
    li.remove();
  });

  daftarTodo.appendChild(li);
  inputTodo.value = ''; // Kosongkan input
  inputTodo.focus();    // Fokus kembali ke input
}

btnTambah.addEventListener('click', tambahTugas);

// Tekan Enter untuk tambah
inputTodo.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') tambahTugas();
});

Traversal DOM

Kita juga bisa berpindah antar elemen menggunakan properti traversal:

• parentElement — mengakses elemen induk
• children — mengakses semua anak langsung
• firstElementChild dan lastElementChild — anak pertama/terakhir
• nextElementSibling dan previousElementSibling — saudara sebelum/sesudah

Kesimpulan

Manipulasi DOM adalah keterampilan inti yang wajib dikuasai setiap web developer. Dengan memahami cara memilih elemen, mengubah konten dan style, serta menambah atau menghapus elemen secara dinamis, kamu sudah bisa membuat halaman web yang interaktif tanpa framework apapun. Latihan terbaik adalah membangun proyek kecil seperti to-do list, kalkulator, atau quiz sederhana menggunakan pure JavaScript.