Manipulasi DOM JavaScript, Yuk Belajar Cara kerjanya!
Dalam pengembangan web modern, JavaScript memegang peranan penting dalam menciptakan halaman web yang interaktif dan dinamis. Salah satu kemampuan paling fundamental yang wajib dikuasai oleh web developer adalah manipulasi DOM (Document Object Model). Dengan manipulasi DOM, sebuah halaman web tidak lagi bersifat statis, melainkan dapat berubah secara real-time berdasarkan interaksi pengguna tanpa perlu memuat ulang halaman.
Artikel ini akan membahas secara komprehensif mengenai manipulasi DOM menggunakan JavaScript, mulai dari konsep dasar, metode seleksi elemen, hingga praktik terbaik yang sesuai dengan standar pengembangan web profesional.
Pengertian DOM (Document Object Model)
DOM adalah representasi struktur dokumen HTML dalam bentuk objek yang disusun secara hierarkis (tree structure). Setiap elemen HTML, atribut, dan teks di dalam halaman web dianggap sebagai node yang dapat diakses dan dimodifikasi menggunakan JavaScript.
Contoh struktur DOM sederhana:
<body> <h1>Judul</h1> <p>Paragraf</p> </body>
JavaScript dapat:
- Mengubah teks
- Mengganti atribut
- Menambahkan atau menghapus elemen
- Mengatur style
- Merespons event pengguna
Cara Mengakses DOM Menggunakan JavaScript
1. document.getElementById()
Digunakan untuk mengambil elemen berdasarkan id.
const title = document.getElementById('title');
Kelebihan:
- Cepat
- Spesifik
- Paling sering digunakan
2. document.getElementsByClassName()
Mengambil elemen berdasarkan class tertentu.
const items = document.getElementsByClassName('item');
Catatan:
- Mengembalikan HTMLCollection
- Tidak bisa langsung menggunakan array method seperti
forEach
3. document.getElementsByTagName()
Mengambil elemen berdasarkan nama tag.
const paragraphs = document.getElementsByTagName('p');
4. document.querySelector()
Mengambil satu elemen pertama berdasarkan selector CSS.
const button = document.querySelector('.btn-primary');
5. document.querySelectorAll()
Mengambil semua elemen yang sesuai selector CSS.
const buttons = document.querySelectorAll('.btn');
Keunggulan:
- Mendukung selector CSS penuh
- Mengembalikan NodeList
- Bisa menggunakan
forEach
Mengubah Konten Elemen DOM
Menggunakan textContent
element.textContent = 'Teks baru';
Aman dari XSS karena tidak memproses HTML.
Menggunakan innerHTML
element.innerHTML = '<strong>Teks tebal</strong>';
⚠️ Perlu hati-hati karena dapat mengeksekusi HTML dan berisiko XSS jika tidak divalidasi.
Manipulasi Atribut HTML
Mengubah Atribut
image.setAttribute('src', 'gambar.jpg');
Mengambil Atribut
const src = image.getAttribute('src');
Menghapus Atribut
input.removeAttribute('disabled');
Manipulasi Class dan Style
Menggunakan classList
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('dark-mode');
Lebih direkomendasikan dibanding manipulasi langsung className.
Mengubah Style Langsung
element.style.color = 'red'; element.style.backgroundColor = '#f5f5f5';
Catatan:
- Cocok untuk perubahan dinamis
- Untuk styling kompleks, gunakan class CSS
Menambahkan dan Menghapus Elemen DOM
Membuat Elemen Baru
const div = document.createElement('div');
div.textContent = 'Elemen baru';
Menambahkan ke DOM
document.body.appendChild(div);
Menghapus Elemen
div.remove();
Event Handling dalam Manipulasi DOM
Manipulasi DOM sering dikombinasikan dengan event.
Contoh Event Click
button.addEventListener('click', function () {
alert('Tombol diklik');
});
Event yang Umum Digunakan
clicksubmitkeyupchangeload
Manipulasi DOM Berdasarkan Input Pengguna
Contoh sederhana validasi real-time:
input.addEventListener('keyup', function () {
if (this.value.length < 5) {
message.textContent = 'Minimal 5 karakter';
} else {
message.textContent = '';
}
});
Best Practice Manipulasi DOM JavaScript
1. Hindari Manipulasi DOM Berulang
Manipulasi DOM mahal secara performa. Gunakan variabel penampung.
❌ Buruk:
document.getElementById('title').textContent = 'A';
document.getElementById('title').style.color = 'red';
✅ Baik:
const title = document.getElementById('title');
title.textContent = 'A';
title.style.color = 'red';
2. Gunakan Event Delegation
Efektif untuk elemen dinamis.
list.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
console.log(e.target.textContent);
}
});
3. Gunakan querySelector Secara Konsisten
Lebih fleksibel dan modern.
4. Pisahkan Logika dan Tampilan
- HTML: struktur
- CSS: tampilan
- JavaScript: interaksi
Manipulasi DOM vs Framework JavaScript
Manipulasi DOM langsung:
- Cocok untuk project kecil–menengah
- Lebih ringan
- Tidak bergantung library
Framework (React, Vue):
- Cocok untuk aplikasi kompleks
- Virtual DOM
- Struktur lebih ketat
Pemahaman manipulasi DOM tetap wajib, bahkan saat menggunakan framework.
Dampak Manipulasi DOM terhadap SEO
Manipulasi DOM dengan JavaScript:
- Aman untuk SEO jika konten utama tetap ada di HTML
- Hindari rendering konten penting sepenuhnya via JS
- Gunakan progressive enhancement
Kesimpulan
Manipulasi DOM JavaScript merupakan fondasi utama dalam pengembangan web interaktif. Dengan memahami cara kerja DOM, metode seleksi elemen, serta praktik manipulasi yang efisien dan aman, developer dapat membangun antarmuka yang responsif, cepat, dan mudah dirawat.
Penguasaan manipulasi DOM tidak hanya penting untuk JavaScript murni, tetapi juga menjadi dasar pemahaman framework modern. Oleh karena itu, mempelajari topik ini secara mendalam adalah investasi jangka panjang bagi setiap web developer.
