Manipulasi DOM

DOM (Document Object Model) adalah representasi dari dokumen HTML sebagai pohon objek yang memungkinkan JavaScript untuk mengubah struktur, gaya, dan konten halaman web.

Konsep Dasar DOM

DOM adalah API (Application Programming Interface) yang memungkinkan JavaScript untuk:

Mengakses elemen HTML
Mengubah konten HTML
Mengubah atribut HTML
Mengubah style CSS
Menambah/menghapus elemen HTML
Menanggapi event HTML

// Struktur DOM
document
├── html
│   ├── head
│   │   ├── title
│   │   └── meta
│   └── body
│       ├── h1
│       ├── p
│       └── div
└── ...

Seleksi Elemen

Beberapa cara untuk memilih elemen dalam DOM:

Method	Deskripsi	Contoh
`getElementById()`	Memilih elemen berdasarkan ID	`document.getElementById('header')`
`getElementsByClassName()`	Memilih elemen berdasarkan class	`document.getElementsByClassName('item')`
`getElementsByTagName()`	Memilih elemen berdasarkan tag	`document.getElementsByTagName('p')`
`querySelector()`	Memilih elemen pertama yang cocok dengan selector CSS	`document.querySelector('.container')`
`querySelectorAll()`	Memilih semua elemen yang cocok dengan selector CSS	`document.querySelectorAll('button')`

// Contoh seleksi elemen
const header = document.getElementById('header');
const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p');
const container = document.querySelector('.container');
const buttons = document.querySelectorAll('button');

Manipulasi Konten

Mengubah Konten

// innerHTML - mengubah konten HTML
document.getElementById('demo').innerHTML = '<strong>Hello</strong> World!';

// textContent - mengubah teks saja (lebih aman)
document.getElementById('demo').textContent = 'Hello World!';

// innerText - mirip textContent tapi memperhatikan styling
document.getElementById('demo').innerText = 'Hello World!';

Mengubah Atribut

// Mengubah atribut
document.getElementById('myImage').src = 'new-image.jpg';

// Mengubah style
document.getElementById('demo').style.color = 'red';
document.getElementById('demo').style.fontSize = '20px';

// Mengubah class
document.getElementById('demo').className = 'new-class';
document.getElementById('demo').classList.add('active');
document.getElementById('demo').classList.remove('inactive');
document.getElementById('demo').classList.toggle('hidden');

Membuat dan Menghapus Elemen

// Membuat elemen baru
const newDiv = document.createElement('div');
newDiv.textContent = 'Ini div baru';

// Menambahkan ke dokumen
document.body.appendChild(newDiv);

// Menambahkan sebelum elemen tertentu
const target = document.getElementById('target');
document.body.insertBefore(newDiv, target);

// Menghapus elemen
const element = document.getElementById('toBeRemoved');
element.parentNode.removeChild(element);

// Mengganti elemen
const oldElement = document.getElementById('old');
const newElement = document.createElement('div');
newElement.textContent = 'Ini elemen baru';
oldElement.parentNode.replaceChild(newElement, oldElement);

Event Delegation

Teknik untuk menangani event pada elemen yang belum ada atau banyak elemen sekaligus.

// Tanpa delegation (hanya bekerja untuk elemen yang sudah ada)
document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', function() {
        console.log('Item diklik');
    });
});

// Dengan delegation (bekerja untuk elemen sekarang dan masa depan)
document.getElementById('itemContainer').addEventListener('click', function(e) {
    if (e.target.classList.contains('item')) {
        console.log('Item diklik:', e.target.textContent);
    }
});

Praktik Mandiri

Coba manipulasi DOM berikut:

// Fungsi untuk menambah item ke list
function tambahItem() {
    const input = document.getElementById('itemInput');
    const value = input.value.trim();
    
    if (value) {
        const list = document.getElementById('itemList');
        const newItem = document.createElement('li');
        newItem.textContent = value;
        newItem.className = 'list-group-item';
        
        // Tambah tombol hapus
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Hapus';
        deleteBtn.className = 'btn btn-sm btn-danger float-end';
        deleteBtn.addEventListener('click', function() {
            list.removeChild(newItem);
        });
        
        newItem.appendChild(deleteBtn);
        list.appendChild(newItem);
        input.value = '';
    }
}

// Event listener untuk form
document.getElementById('itemForm').addEventListener('submit', function(e) {
    e.preventDefault();
    tambahItem();
});

Daftar Item

Item Contoh