DOM adalah halaman web versi JavaScript: tiap tag jadi elemen yang bisa dibaca dan diubah. Di lesson ini kamu bikin elemen baru dari JavaScript, menghapusnya, mengatur class-nya, dan memasang satu listener buat banyak elemen sekaligus. Ini dasar daftar yang bisa bertambah, kayak to-do list atau kolom chat.
🧪 Tebakan cepat: kamu pasang listener klik di tiap
<li>, lalu menambah<li>baru. Item baru itu ikut bereaksi waktu diklik atau gak? Tebak dulu, jawabannya ada di bagian "Satu listener buat semua item: event delegation".
Bikin elemen baru dengan createElement dan appendChild
HTML-nya cuma <ul id="list"></ul> yang masih kosong:
const list = document.querySelector('#list')
const li = document.createElement('li')
li.textContent = 'Belajar DOM'
list.appendChild(li)
document.querySelector('#list')mencari elemen denganid="list". Tanda pagar#artinya id.document.createElement('li')bikin<li>baru. Elemennya masih di memori, belum kelihatan di halaman.li.textContent = 'Belajar DOM'mengisi teksnya.list.appendChild(li)memasukkanlike dalamlist, sebagai anak paling akhir. Baru sekarang dia muncul.
Hasilnya halaman berisi <ul id="list"><li>Belajar DOM</li></ul>. list.append(li) juga boleh, kerjanya sama.
Tiap appendChild menambah di paling bawah, jadi yang dimasukkan duluan tampil paling atas. Butuh beberapa item? Ulangi tiga langkah tadi, misalnya pakai loop:
for (let i = 1; i <= 2; i++) {
const li = document.createElement('li')
li.textContent = 'Tugas ' + i
list.appendChild(li)
}
Hasilnya dua item baru: Tugas 1 lalu Tugas 2. Tiap putaran harus bikin li baru, karena satu elemen cuma bisa ada di satu tempat.
Menghapus elemen
Cari elemennya, lalu panggil remove():
const item = document.querySelector('#hapus-ini')
item.remove()
Cara lama yang masih sering kelihatan: item.parentNode.removeChild(item), artinya "induknya, tolong buang anak ini".
Mengatur class dengan classList
Class biasanya dipakai CSS buat mengubah tampilan, misalnya item yang selesai dicoret. classList mengatur class satu per satu:
el.classList.add('done')menambah classdone.el.classList.remove('done')membuangnya.el.classList.toggle('done')menambah kalau belum ada, membuang kalau sudah ada.el.classList.contains('done')menjawabtrueataufalse.
classList.add gak mengganggu class lain yang sudah ada. Beda dengan el.className = 'done', yang menimpa semuanya.
Satu listener buat semua item: event delegation
Klik di sebuah <li> gak berhenti di situ. Klik itu naik ke induknya, <ul>, lalu terus ke atas. Jadi cukup satu listener di <ul> buat menangkap klik di semua <li>:
list.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
e.target.classList.add('done')
}
})
- Listener-nya dipasang sekali, di
list, bukan di tiap<li>. eadalah info tentang klik itu.e.targetadalah elemen yang benar-benar diklik.e.target.tagName === 'LI'memastikan yang diklik memang<li>, bukan celah kosong di<ul>.tagNameselalu huruf besar.e.target.classList.add('done')menandai item yang diklik saja.
Isi listener baru jalan waktu ada klik, jadi sebelum diklik belum ada item yang bertanda. Cara ini disebut event delegation. Jawaban tebakan: dengan listener di tiap <li>, item baru gak ikut, karena dia belum ada waktu listener-nya dipasang. Dengan delegation, item baru langsung ikut, karena listener-nya ada di <ul>.
⚠️ Jebakan yang sering ketemu
- Lupa
appendChild. Elemen daricreateElementgak akan muncul sampai dimasukkan ke induknya. classList.adddi luar listener. Kodenya langsung jalan waktu halaman dibuka, jadi item sudah bertanda sebelum diklik. Taruh di dalam callback listener.- Menandai
list, bukane.target.list.classList.add(...)menandai seluruh daftar. Yang diklik ada die.target. innerHTMLbuat teks dari pengguna. Kalau teksnya berisi tag, tag-nya ikut dijalankan. PakaitextContent.
🔬 Coba sendiri
Tempel potongan HTML dan lihat strukturnya sebagai pohon: induk, anak, dan saudara. Pohon inilah yang dijalani klik waktu naik dari <li> ke <ul>.
TL;DR: document.createElement('li') bikin elemen, textContent mengisi teksnya, parent.appendChild(li) menampilkannya di paling bawah. el.remove() menghapus. classList.add, remove, toggle dan contains mengatur class satu per satu. Event delegation: satu listener di induk, lalu e.target memberi tahu anak mana yang diklik, termasuk anak yang ditambah belakangan.
