Andika Rekatias

DOM Manipulation dalam JavaScript

| JavaScript | javascript, tutorial, dom
DOM Manipulation dalam JavaScript

Halaman web yang kita lihat di browser itu bukan cuma file HTML statis — ada sebuah struktur data di balik layar yang bisa diakses dan diubah lewat JavaScript. Struktur ini namanya DOM (Document Object Model).

DOM manipulation adalah kemampuan untuk mengubah isi, struktur, dan tampilan halaman web secara dinamis. Tanpa ini, kita cuma bisa bikin halaman statis. Dengan DOM manipulation, kita bisa bikin to-do list, galeri interaktif, form validasi, dan banyak lagi.

Artikel ini akan bedah cara akses elemen, buat elemen baru, ubah konten, dan manipulasi style — semuanya lewat JavaScript.

1. Apa Itu DOM?

DOM adalah representasi struktur halaman web dalam bentuk objek yang bisa diakses JavaScript. Browser membaca file HTML, lalu membangun sebuah “pohon” (tree) dari semua elemen — mulai dari <html>, <head>, <body>, sampai elemen terkecil seperti <span> atau <button>.

Bayangkan DOM seperti struktur organisasi perusahaan. CEO (document) di paling atas, departemen (<body>) di bawahnya, dan karyawan (<p>, <div>, <h1>) di level paling bawah. JavaScript adalah manajer yang bisa “jalan-jalan” lewat struktur ini, ambil data dari karyawan mana pun, dan perintahkan mereka untuk ubah cara kerja.

DOM bukan bagian dari JavaScript — DOM adalah Web API yang disediakan oleh browser. JavaScript cuma punya akses ke API ini lewat objek global document.

// document adalah pintu masuk ke DOM
console.log(document); // #document
console.log(document.title); // Judul halaman
console.log(document.body); // <body>...</body>

2. Mengakses Elemen: getElementById

Cara paling dasar untuk mengambil elemen dari DOM adalah getElementById. Sesuai namanya, cara ini mengambil elemen berdasarkan atribut id-nya.

<h1 id="judul">Halo, Dunia!</h1>
<p id="paragraf">Ini adalah paragraf pertama.</p>

// Ambil elemen berdasarkan id
const judul = document.getElementById('judul');
console.log(judul); // <h1 id="judul">Halo, Dunia!</h1>
console.log(judul.textContent); // "Halo, Dunia!"

getElementById mengembalikan satu elemen (atau null kalau tidak ditemukan). Karena id harus unik di satu halaman, tidak ada yang namanya “beberapa hasil”.

3. Mengakses Elemen: querySelector & querySelectorAll

getElementById terbatas pada id. Kalau mau ambil elemen berdasarkan class, tag, atau selector CSS yang lebih kompleks, pakai querySelector dan querySelectorAll.

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<p class="card">Card 3 (ini paragraph)</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// querySelector — ambil SATU elemen pertama yang cocok
const pertama = document.querySelector('.card');
console.log(pertama.textContent); // "Card 1"

// Ambil elemen dengan selector lebih spesifik
const itemPertama = document.querySelector('ul > li');
console.log(itemPertama.textContent); // "Item 1"

// querySelectorAll — ambil SEMUA elemen yang cocok
const semuaCard = document.querySelectorAll('.card');
console.log(semuaCard.length); // 3
console.log(semuaCard[0].textContent); // "Card 1"
console.log(semuaCard[2].textContent); // "Card 3 (ini paragraph)"

Perbedaan utama:

  • querySelector → mengembalikan satu elemen (atau null)
  • querySelectorAll → mengembalikan NodeList (kumpulan elemen)

NodeList mirip array — punya property length dan bisa diakses dengan index. Tapi NodeList bukan array beneran, jadi metode seperti map atau filter tidak tersedia secara langsung. Kalau mau pakai metode array, konversi dulu:

const semuaCard = document.querySelectorAll('.card');
const arrayCard = Array.from(semuaCard);
arrayCard.forEach(card => console.log(card.textContent));

4. Mengubah Konten Elemen

Setelah elemen diakses, ada beberapa cara untuk mengubah isinya:

textContent

Mengubah teks di dalam elemen. Aman dari XSS karena tidak merender HTML.

const judul = document.getElementById('judul');
judul.textContent = 'Judul Baru!';

innerHTML

Mengubah isi elemen secara mentah — bisa mengandung HTML tag.

const container = document.getElementById('container');
container.innerHTML = '<h2>Judul Baru</h2><p>Paragraf baru juga.</p>';

⚠️ Peringatan: Jangan pakai innerHTML untuk menampilkan input dari user. Bisa jadi celah keamanan XSS (Cross-Site Scripting) — user bisa menyisipkan script berbahaya lewat input.

// ❌ Jangan lakukan ini dengan data dari user
container.innerHTML = userInput;

// ✅ Aman — hanya menampilkan teks
container.textContent = userInput;

innerHTML + template literal

Cocok untuk bikin elemen kompleks secara dinamis:

const nama = 'Budi';
const umur = 25;

const card = document.getElementById('card');
card.innerHTML = `
  <h3>${nama}</h3>
  <p>Umur: ${umur} tahun</p>
`;

5. Membuat & Menambahkan Elemen Baru

DOM manipulation bukan cuma soal mengubah elemen yang sudah ada — kita juga bisa membuat elemen baru dari nol dan menambahkannya ke halaman.

// 1. Buat elemen baru
const baris = document.createElement('li');

// 2. Isi kontennya
baris.textContent = 'Item baru dari JavaScript';

// 3. Ambil parent-nya
const daftar = document.querySelector('ul');

// 4. Tambahkan ke DOM
daftar.appendChild(baris);

Ada beberapa cara menambahkan elemen ke DOM:

const parent = document.querySelector('ul');
const elemenBaru = document.createElement('li');
elemenBaru.textContent = 'Item 3';

// appendChild — tambah di akhir
parent.appendChild(elemenBaru);

// prepend — tambah di awal
parent.prepend(elemenBaru);

// insertBefore — tambah sebelum elemen tertentu
const referensi = parent.children[1];
parent.insertBefore(elemenBaru, referensi);

// after / before — tambah setelah/sebelum elemen
referensi.after(elemenBaru);
referensi.before(elemenBaru);

Menghapus Elemen

const item = document.querySelector('li');
item.remove(); // Hapus elemen dari DOM

Mengganti Elemen

const lama = document.querySelector('li');
const baru = document.createElement('li');
baru.textContent = 'Item pengganti';
lama.replaceWith(baru);

6. Mengubah Style & Attribute

DOM manipulation juga memungkinkan kita mengubah tampilan elemen tanpa sentuh file CSS.

Mengubah style langsung

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

// Mengubah satu property
kotak.style.backgroundColor = 'blue';
kotak.style.color = 'white';
kotak.style.padding = '20px';
kotak.style.borderRadius = '8px';

Perlu diingat: nama property CSS yang pakai tanda hubung (seperti background-color) ditulis dalam camelCase di JavaScript (backgroundColor).

Mengubah class — pendekatan lebih rapi

Direct styling lewat .style cocok untuk perubahan kecil. Untuk perubahan yang lebih terstruktur, lebih baik pakai class:

/* Di file CSS */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

.hidden {
  display: none;
}

const elemen = document.querySelector('p');

// Tambah class
elemen.classList.add('highlight');

// Hapus class
elemen.classList.remove('highlight');

// Toggle class (kalau ada hapus, kalau belum tambah)
elemen.classList.toggle('hidden');

// Cek apakah class ada
if (elemen.classList.contains('highlight')) {
  console.log('Elemen ini highlight');
}

Mengubah attribute

const gambar = document.querySelector('img');

// Mengubah src
gambar.src = 'gambar-baru.jpg';

// Mengubah alt
gambar.alt = 'Deskripsi gambar baru';

// Mengatur attribute custom
const link = document.querySelector('a');
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener noreferrer');

// Membaca attribute
console.log(gambar.getAttribute('src'));
console.log(link.hasAttribute('target')); // true

7. Studi Kasus: Todo List Sederhana

Mari kita gabungkan semua konsep yang sudah dipelajari dalam sebuah contoh praktis — todo list sederhana.

<div id="app">
  <input type="text" id="input-tugas" placeholder="Ketik tugas baru...">
  <button id="btn-tambah">Tambah</button>
  <ul id="daftar-tugas"></ul>
</div>

const inputTugas = document.getElementById('input-tugas');
const btnTambah = document.getElementById('btn-tambah');
const daftarTugas = document.getElementById('daftar-tugas');

btnTambah.addEventListener('click', function () {
  const teks = inputTugas.value.trim();
  
  if (teks === '') return;
  
  // Buat elemen baru
  const li = document.createElement('li');
  li.textContent = teks;
  
  // Tambahkan fitur hapus
  const btnHapus = document.createElement('button');
  btnHapus.textContent = '×';
  btnHapus.style.marginLeft = '10px';
  btnHapus.addEventListener('click', function () {
    li.remove();
  });
  
  li.appendChild(btnHapus);
  daftarTugas.appendChild(li);
  
  // Bersihkan input
  inputTugas.value = '';
  inputTugas.focus();
});

Kode ini menggunakan addEventListener (yang sudah dibahas di artikel sebelumnya) untuk handle klik tombol. Di dalam handler-nya, kita buat elemen baru secara dinamis, isi kontennya, dan tambahkan ke DOM.

Recap

Metode Fungsi Return
getElementById('id') Ambil elemen berdasarkan id Satu elemen
querySelector('selector') Ambil elemen berdasarkan CSS selector Satu elemen
querySelectorAll('selector') Ambil semua elemen yang cocok NodeList
createElement('tag') Buat elemen baru Elemen baru
appendChild(elemen) Tambah elemen sebagai anak terakhir Elemen yang ditambahkan
textContent Ambil/ubah teks String
innerHTML Ambil/ubah isi HTML String
classList.add/remove/toggle Kelola class —
style.property Ubah style langsung —
setAttribute(atribut, nilai) Set attribute —
remove() Hapus elemen dari DOM —

Penutup

DOM manipulation adalah fondasi dari setiap website interaktif. Dengan memahami cara akses, buat, ubah, dan hapus elemen, Anda sudah punya semua tool untuk bikin halaman web yang dinamis.

Di artikel selanjutnya, kita akan bahas Events & Event Handling — bagaimana merespons aksi user seperti klik, ketik, dan hover. Kombinasi DOM manipulation + events inilah yang bikin website benar-benar hidup.

← Sebelumnya: Arrays & Objects Selanjutnya: Events & Event Handling →
Mail Facebook Twitter Whatsapp