Daftar Isi

1. Pengantar DOM Lanjutan
2. Event dalam DOM
3. Hierarki DOM dan Navigasi
4. Proyek Praktis: To-Do List Interaktif
5. Sumber Belajar dan Source Code

1. Pengantar DOM Lanjutan

Document Object Model (DOM) adalah representasi struktur dokumen HTML atau XML dalam bentuk objek yang dapat dimanipulasi menggunakan JavaScript. Pada pelajaran ini, kita akan mempelajari konsep lanjutan DOM yang meliputi event, hierarki, dan penerapan praktis dalam proyek sederhana.

Dengan memahami DOM lanjutan, Anda dapat membuat aplikasi web yang lebih interaktif dan dinamis, serta mengelola elemen-elemen halaman dengan lebih efisien.

2. Event dalam DOM

Event adalah aksi atau kejadian yang terjadi pada elemen HTML, seperti klik, hover, input, dan lain-lain. Event memungkinkan kita untuk menambahkan interaktivitas pada halaman web.

2.1. Jenis-Jenis Event Umum

• click - Ketika elemen diklik.
• mouseover - Ketika kursor mouse berada di atas elemen.
• mouseout - Ketika kursor mouse meninggalkan elemen.
• input - Ketika nilai input berubah.
• submit - Ketika form dikirim.

2.2. Menangani Event dengan JavaScript

Kita dapat menambahkan event listener pada elemen menggunakan metode addEventListener . Contoh:

const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  alert('Tombol diklik!');
});

      

2.3. Contoh Praktis: Tombol Klik

3. Hierarki DOM dan Navigasi

DOM tersusun dalam bentuk pohon (tree) yang memiliki node induk (parent), anak (child), dan saudara (sibling). Memahami hierarki ini penting untuk menavigasi dan memanipulasi elemen dengan tepat.

3.1. Node Parent, Child, dan Sibling

• parentNode - Mengakses elemen induk dari sebuah node.
• childNodes - Mengakses semua anak (termasuk teks dan komentar).
• children - Mengakses anak yang berupa elemen HTML saja.
• nextSibling - Node saudara berikutnya (termasuk teks).
• nextElementSibling - Node saudara berikutnya yang berupa elemen HTML.

3.2. Contoh Navigasi DOM

Berikut contoh kode untuk menavigasi dan mengubah isi elemen menggunakan hierarki DOM:

const list = document.getElementById('myList');
const firstChild = list.firstElementChild;
const parent = list.parentNode;

firstChild.textContent = 'Item pertama diubah';
parent.style.backgroundColor = '#e0e7ff';

      

3.3. Demo Navigasi DOM

• Item pertama
• Item kedua
• Item ketiga

4. Proyek Praktis: To-Do List Interaktif

Kita akan membuat aplikasi To-Do List sederhana yang memungkinkan pengguna menambah, menandai selesai, dan menghapus tugas. Proyek ini menggabungkan event handling dan manipulasi DOM.

4.1. Struktur HTML

<div id="todoApp" class="max-w-md mx-auto bg-white p-6 rounded-lg shadow">
  <h3 class="text-xl font-semibold mb-4">To-Do List</h3>
  <form id="todoForm" class="flex mb-4">
    <input type="text" id="todoInput" placeholder="Tambah tugas baru..." class="flex-grow border border-gray-300 rounded-l px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
    <button type="submit" class="bg-indigo-600 text-white px-4 rounded-r hover:bg-indigo-700 transition">Tambah</button>
  </form>
  <ul id="todoList" class="list-disc list-inside space-y-2"></ul>
</div>

      

4.2. JavaScript Interaktif

const todoForm = document.getElementById('todoForm');
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const task = todoInput.value.trim();
  if (task === '') return;

  const li = document.createElement('li');
  li.className = 'flex justify-between items-center bg-indigo-50 rounded px-3 py-2';

  const span = document.createElement('span');
  span.textContent = task;

  const btnGroup = document.createElement('div');
  btnGroup.className = 'space-x-2';

  const doneBtn = document.createElement('button');
  doneBtn.innerHTML = '<i class="fas fa-check"></i>';
  doneBtn.className = 'text-green-600 hover:text-green-800';
  doneBtn.type = 'button';

  const delBtn = document.createElement('button');
  delBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
  delBtn.className = 'text-red-600 hover:text-red-800';
  delBtn.type = 'button';

  doneBtn.addEventListener('click', () => {
    span.classList.toggle('line-through');
    span.classList.toggle('text-gray-500');
  });

  delBtn.addEventListener('click', () => {
    todoList.removeChild(li);
  });

  btnGroup.appendChild(doneBtn);
  btnGroup.appendChild(delBtn);

  li.appendChild(span);
  li.appendChild(btnGroup);

  todoList.appendChild(li);
  todoInput.value = '';
  todoInput.focus();
});

      

4.3. Demo To-Do List

5. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar tambahan dan link untuk melihat source code lengkap dari proyek To-Do List:

• MDN Web Docs - Introduction to the DOM
• JavaScript.info - Event Handling
• W3Schools - HTML DOM Tutorial
• GitHub - Source Code To-Do List Project
• YouTube Channel: Academind (Pembelajaran JavaScript dan DOM)