DOM dan Event · Basic JavaScript: Dari Nol sampai Proyek Pertama

DOM adalah representasi halaman HTML dalam bentuk object. JavaScript dapat memilih, mengubah, membuat, dan menghapus elemen melalui DOM.

Memilih elemen

Code

<h1 id="judul">Daftar Tugas</h1>
<input id="input-tugas" />
<button id="tambah">Tambah</button>
<ul id="daftar"></ul>

Code

const judul = document.querySelector("#judul");
const input = document.querySelector("#input-tugas");
const tombol = document.querySelector("#tambah");
const daftar = document.querySelector("#daftar");

Mengubah konten dan class

Code

judul.textContent = "Tugas Hari Ini";
judul.classList.add("aktif");
judul.classList.toggle("besar");

Gunakan textContent untuk teks dari pengguna. Hindari memasukkan input pengguna melalui innerHTML karena dapat membuka celah XSS.

Membuat elemen

Code

function tambahTugas(teks) {
  const item = document.createElement("li");
  item.textContent = teks;
  daftar.append(item);
}

Event listener

Code

tombol.addEventListener("click", () => {
  const teks = input.value.trim();

  if (!teks) return;

  tambahTugas(teks);
  input.value = "";
  input.focus();
});

Tangani tombol Enter:

Code

input.addEventListener("keydown", event => {
  if (event.key === "Enter") tombol.click();
});

Event delegation

Untuk banyak item, pasang satu listener pada parent.

Code

daftar.addEventListener("click", event => {
  if (event.target.matches("li")) {
    event.target.classList.toggle("selesai");
  }
});

Latihan

Kembangkan daftar tugas agar:

item dapat ditandai selesai;
ada tombol hapus pada setiap item;
input kosong menampilkan pesan validasi;
jumlah tugas aktif ditampilkan di halaman.