Manipulasi DOM dengan JavaScript

Oleh: Andi Ardiansyah Nasir Terakhir diperbarui: 10 Juni 2025

Pengantar DOM (Document Object Model)

DOM adalah representasi struktur dokumen HTML sebagai pohon objek yang dapat dimanipulasi dengan JavaScript. Setiap elemen HTML menjadi "node" dalam pohon ini, dan kita dapat mengakses, mengubah, menambah, atau menghapus node tersebut secara dinamis.

Dengan DOM, kita bisa membuat halaman web yang interaktif dan responsif. Mulai dari mengubah teks, menambahkan elemen baru, merespons event klik, hingga membuat animasi - semua bisa dilakukan dengan memanipulasi DOM menggunakan JavaScript.

Memilih Elemen DOM

Ada beberapa cara untuk memilih elemen dalam DOM:

1. getElementById

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

Memilih elemen berdasarkan ID-nya (unik dalam satu dokumen).

2. getElementsByClassName

const items = document.getElementsByClassName('item'); // HTMLCollection

Memilih semua elemen dengan class tertentu (mengembalikan HTMLCollection).

3. getElementsByTagName

const paragraphs = document.getElementsByTagName('p'); // HTMLCollection

Memilih semua elemen dengan tag tertentu.

4. querySelector

const firstItem = document.querySelector('.item'); // Elemen pertama

Memilih elemen pertama yang cocok dengan selector CSS.

5. querySelectorAll

const allItems = document.querySelectorAll('.item'); // NodeList

Memilih semua elemen yang cocok dengan selector CSS (mengembalikan NodeList).

Mengubah Elemen DOM

Setelah memilih elemen, kita bisa memodifikasi propertinya:

1. Mengubah Konten

// Mengubah teks
element.textContent = 'Teks baru';

// Mengubah HTML
element.innerHTML = '<strong>Tebal</strong> teks';

2. Mengubah Atribut

// Mengubah atribut
element.setAttribute('href', 'https://example.com');

// Mengambil atribut
const href = element.getAttribute('href');

// Menghapus atribut
element.removeAttribute('title');

3. Mengubah Style

// Mengubah style langsung
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

// Menambahkan/menghapus class
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('hidden');

Demo Interaktif: Mengubah Style

Coba ubah style teks ini!

Membuat dan Menambahkan Elemen

Kita bisa membuat elemen baru dan menambahkannya ke DOM:

1. Membuat Elemen Baru

const newDiv = document.createElement('div');
newDiv.textContent = 'Ini div baru';
newDiv.className = 'box';

2. Menambahkan ke DOM

// Menambahkan sebagai anak terakhir
parentElement.appendChild(newDiv);

// Menambahkan sebelum elemen tertentu
parentElement.insertBefore(newDiv, referenceElement);

// Menambahkan HTML string
container.innerHTML += '<div class="box">Box baru</div>';

3. Clone Node

const original = document.querySelector('.template');
const clone = original.cloneNode(true); // true untuk deep clone
document.body.appendChild(clone);

Demo Interaktif: Menambahkan Item

Item 1
Item 2

Menghapus Elemen

Ada beberapa cara untuk menghapus elemen dari DOM:

1. removeChild

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

2. remove()

const element = document.getElementById('element-to-remove');
element.remove();

3. Mengosongkan Elemen

document.getElementById('container').innerHTML = '';

Event Handling

Event adalah tindakan yang terjadi di halaman web (klik, input, hover, dll). Kita bisa merespons event dengan event listener.

1. Menambahkan Event Listener

const button = document.getElementById('myButton');

// Cara 1: Menggunakan properti
button.onclick = function() {
  console.log('Button diklik!');
};

// Cara 2: addEventListener (lebih fleksibel)
button.addEventListener('click', function(event) {
  console.log('Button diklik!', event);
});

2. Jenis-Jenis Event

// Klik
element.addEventListener('click', handleClick);

// Input/change
inputElement.addEventListener('input', handleInput);
inputElement.addEventListener('change', handleChange);

// Keyboard
document.addEventListener('keydown', handleKeyDown);

// Mouse
element.addEventListener('mouseover', handleMouseOver);
element.addEventListener('mouseout', handleMouseOut);

// Form
formElement.addEventListener('submit', handleSubmit);

3. Event Delegation

// Daripada menambahkan listener ke setiap item
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Item diklik:', event.target.textContent);
  }
});

Berguna untuk elemen dinamis atau banyak elemen sejenis.

Demo Interaktif: Event Handling

Klik atau hover saya

Traversing DOM

Traversing berarti berpindah dari satu elemen ke elemen lain dalam hierarki DOM.

1. Navigasi ke Parent

const child = document.getElementById('child');
const parent = child.parentNode; // atau parentElement

2. Navigasi ke Children

const parent = document.getElementById('parent');
const firstChild = parent.firstChild; // atau firstElementChild
const lastChild = parent.lastChild; // atau lastElementChild
const children = parent.children; // HTMLCollection

3. Navigasi ke Sibling

const middle = document.getElementById('middle');
const prev = middle.previousSibling; // atau previousElementSibling
const next = middle.nextSibling; // atau nextElementSibling

Manipulasi Form

Form adalah elemen penting yang sering dimanipulasi dengan JavaScript.

1. Mengakses Nilai Form

const input = document.getElementById('username');
console.log(input.value); // Mendapatkan nilai input

const select = document.getElementById('country');
console.log(select.value); // Mendapatkan nilai yang dipilih

const checkbox = document.getElementById('subscribe');
console.log(checkbox.checked); // true/false

2. Validasi Form

formElement.addEventListener('submit', function(event) {
  const username = document.getElementById('username').value;
  
  if (username.length < 5) {
    event.preventDefault(); // Mencegah pengiriman form
    alert('Username minimal 5 karakter');
  }
});

Demo Interaktif: Validasi Form

Kesimpulan

Manipulasi DOM adalah inti dari pengembangan web interaktif dengan JavaScript. Dengan memahami cara memilih, mengubah, menambah, dan menghapus elemen DOM, serta menangani event, Anda bisa membuat halaman web yang dinamis dan responsif.

Beberapa praktik terbaik dalam manipulasi DOM termasuk menggunakan event delegation untuk elemen dinamis, meminimalkan manipulasi DOM langsung (karena mahal secara performa), dan memanfaatkan metode modern seperti querySelector dan classList untuk kode yang lebih bersih dan mudah dibaca.

Dengan menguasai konsep-konsep dasar yang telah dibahas di artikel ini, Anda sudah memiliki fondasi yang kuat untuk membangun aplikasi web yang lebih interaktif dan kompleks menggunakan JavaScript.