Manipulasi DOM

DOM (Document Object Model) adalah representasi halaman HTML yang bisa dimanipulasi oleh JavaScript. Dengan DOM, kamu bisa mengubah konten, style, dan struktur halaman secara dinamis — tanpa perlu reload.

Mengambil Elemen

Langkah pertama sebelum memanipulasi elemen HTML adalah mengambilnya (select):

// Berdasarkan ID (paling sering dipakai)
let judul = document.getElementById('judul');

// Berdasarkan class (hasilnya HTMLCollection)
let cards = document.getElementsByClassName('card');

// Berdasarkan tag (hasilnya HTMLCollection)
let paragraf = document.getElementsByTagName('p');

// CSS Selector — satu elemen (paling fleksibel) ✅
let tombol = document.querySelector('.btn-primary');
let header = document.querySelector('header nav');

// CSS Selector — semua elemen yang cocok ✅
let semuaCard = document.querySelectorAll('.card');

querySelector vs getElementById

querySelector lebih fleksibel karena bisa pakai CSS selector apapun:

document.querySelector('#judul');          // Sama dengan getElementById
document.querySelector('.card:first-child'); // Elemen pertama dengan class card
document.querySelector('nav a');           // Link pertama di dalam nav

Mengubah Konten

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

// Mengubah teks
judul.textContent = 'Judul Baru';

// Mengubah HTML (termasuk tag)
judul.innerHTML = 'Judul <em>Baru</em>';

// Mengubah atribut
let gambar = document.querySelector('img');
gambar.src = 'foto-baru.jpg';
gambar.alt = 'Deskripsi baru';

let link = document.querySelector('a');
link.href = 'https://google.com';

Mengubah Style

let box = document.getElementById('box');

// Mengubah satu property
box.style.backgroundColor = '#667eea';
box.style.color = 'white';
box.style.padding = '20px';
box.style.borderRadius = '10px';

// ⚠️ Property CSS yang pakai tanda hubung (-) ditulis camelCase
// background-color → backgroundColor
// border-radius → borderRadius
// font-size → fontSize

Mengubah Class (Lebih Baik!)

let box = document.getElementById('box');

// Tambah class
box.classList.add('active');
box.classList.add('highlight', 'large');

// Hapus class
box.classList.remove('active');

// Toggle (tambah kalau belum ada, hapus kalau sudah ada)
box.classList.toggle('active');

// Cek apakah punya class
if (box.classList.contains('active')) {
    console.log('Box aktif!');
}

:::tip classList vs style Lebih baik mengubah class daripada langsung mengubah style. Kenapa?

Style tetap di CSS (separation of concerns)
Lebih mudah dikelola dan di-maintain
Bisa menerapkan banyak style sekaligus :::

Event Handling

Event adalah aksi yang terjadi di halaman — klik, ketik, scroll, hover, dll. JavaScript bisa merespon event tersebut.

Cara 1: Inline (di HTML) — Tidak Direkomendasikan

<button onclick="alert('Diklik!')">Klik Saya</button>

Cara 2: addEventListener ✅

let tombol = document.getElementById('btn-klik');

tombol.addEventListener('click', function() {
    alert('Tombol diklik!');
});

// Atau dengan arrow function
tombol.addEventListener('click', () => {
    alert('Tombol diklik!');
});

Event Umum

Event	Trigger
`click`	Elemen diklik
`dblclick`	Elemen double-click
`mouseover`	Mouse masuk area elemen
`mouseout`	Mouse keluar area elemen
`keydown`	Tombol keyboard ditekan
`keyup`	Tombol keyboard dilepas
`submit`	Form di-submit
`change`	Nilai input berubah
`input`	Sedang mengetik di input
`focus`	Input mendapat fokus
`blur`	Input kehilangan fokus

Event Object

// Event object berisi detail tentang event yang terjadi
document.addEventListener('click', function(event) {
    console.log('Diklik di koordinat:', event.clientX, event.clientY);
    console.log('Elemen yang diklik:', event.target);
});

// Mencegah perilaku default
let form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault();  // Halaman tidak akan reload
    console.log('Form di-submit!');
});

Membuat dan Menghapus Elemen

// Membuat elemen baru
let cardBaru = document.createElement('div');
cardBaru.className = 'card';
cardBaru.innerHTML = '<h3>Card Baru</h3><p>Dibuat dengan JavaScript!</p>';

// Menambahkan ke halaman
let container = document.getElementById('container');
container.appendChild(cardBaru);          // Tambah di akhir
container.prepend(cardBaru);              // Tambah di awal
container.insertBefore(cardBaru, child);  // Tambah sebelum elemen tertentu

// Menghapus elemen
cardBaru.remove();
// Atau
container.removeChild(cardBaru);

Latihan: Todo List Interaktif

Buat file todo.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #f0f2f5;
            display: flex;
            justify-content: center;
            padding: 40px 20px;
        }
        .todo-app {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
        }
        h1 { text-align: center; color: #667eea; margin-bottom: 20px; }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .input-group input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        .input-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        .input-group button {
            padding: 12px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        .input-group button:hover { background: #5a6fd6; }
        .todo-list { list-style: none; }
        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
        }
        .todo-item.done span {
            text-decoration: line-through;
            color: #aaa;
        }
        .todo-item button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            padding: 4px 8px;
        }
        .btn-done { color: #28a745; }
        .btn-delete { color: #dc3545; }
        .btn-done:hover { background: #e8f5e9; border-radius: 4px; }
        .btn-delete:hover { background: #fde8e8; border-radius: 4px; }
        .counter {
            text-align: center;
            color: #999;
            margin-top: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="todo-app">
        <h1>Todo List ✅</h1>

        <div class="input-group">
            <input type="text" id="input-todo" placeholder="Tambah tugas baru...">
            <button id="btn-tambah">Tambah</button>
        </div>

        <ul class="todo-list" id="todo-list"></ul>

        <p class="counter" id="counter">0 tugas</p>
    </div>

    <script>
        const inputTodo = document.getElementById('input-todo');
        const btnTambah = document.getElementById('btn-tambah');
        const todoList = document.getElementById('todo-list');
        const counter = document.getElementById('counter');

        // Tambah tugas baru
        function tambahTodo() {
            const teks = inputTodo.value.trim();
            if (teks === '') return;

            // Buat elemen baru
            const li = document.createElement('li');
            li.className = 'todo-item';
            li.innerHTML = `
                <span>${teks}</span>
                <div>
                    <button class="btn-done" title="Selesai">✓</button>
                    <button class="btn-delete" title="Hapus">✕</button>
                </div>
            `;

            // Event: tandai selesai
            li.querySelector('.btn-done').addEventListener('click', function() {
                li.classList.toggle('done');
                updateCounter();
            });

            // Event: hapus tugas
            li.querySelector('.btn-delete').addEventListener('click', function() {
                li.remove();
                updateCounter();
            });

            // Tambahkan ke daftar
            todoList.appendChild(li);
            inputTodo.value = '';
            inputTodo.focus();
            updateCounter();
        }

        // Update penghitung
        function updateCounter() {
            const total = todoList.children.length;
            const selesai = todoList.querySelectorAll('.done').length;
            counter.textContent = `${selesai}/${total} tugas selesai`;
        }

        // Event listener
        btnTambah.addEventListener('click', tambahTodo);
        inputTodo.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                tambahTodo();
            }
        });
    </script>
</body>
</html>

Selanjutnya

Sekarang kamu bisa memanipulasi halaman web dengan JavaScript! Mari lanjut ke Validasi Form → — mengecek data yang diinput pengguna sebelum dikirim ke server.

#Manipulasi DOM

#Mengambil Elemen

#Mengubah Konten

#Mengubah Style

#Mengubah Class (Lebih Baik!)

#Event Handling

#Cara 1: Inline (di HTML) — Tidak Direkomendasikan

#Cara 2: addEventListener ✅

#Event Umum

#Event Object

#Membuat dan Menghapus Elemen

#Latihan: Todo List Interaktif

#Selanjutnya