DOM dan Event JavaScript: Membuat HTML Bisa Berinteraksi

1. Apa Itu DOM?#

DOM merupakan singkatan dari Document Object Model.

Secara sederhana, DOM adalah representasi dokumen HTML dalam bentuk struktur object yang dapat diakses dan dimanipulasi oleh JavaScript.

Ketika browser membaca dokumen HTML, browser membangun representasi DOM dari dokumen tersebut.

Misalnya, kita mempunyai HTML berikut:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Belajar DOM</title>
6
</head>
7
<body>
8
  <h1>Halo, Gabuters!</h1>
9
  <p>Selamat datang di BapakGabut.</p>
10
</body>
11
</html>

Secara sederhana, strukturnya bisa dibayangkan seperti ini:

1
document
2
└── html
3
    ├── head
4
    │   ├── meta
5
    │   └── title
6
    └── body
7
        ├── h1
8
        └── p

Struktur tersebut memungkinkan JavaScript menemukan elemen seperti h1, p, atau button, kemudian melakukan perubahan terhadapnya.

Jadi, HTML menyediakan struktur halaman, CSS mengatur tampilannya, sedangkan JavaScript dapat mengubah isi dan perilakunya melalui DOM.

2. Menyiapkan File HTML dan JavaScript#

Sebelum mulai praktik, kita buat dua file dalam satu folder:

1
belajar-dom/
2
├── index.html
3
└── script.js

Isi index.html:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Belajar DOM JavaScript</title>
7
  <script src="script.js" defer></script>
8
</head>
9
<body>
10
  <h1 id="judul">Halo, Gabuters!</h1>
11
  <p id="deskripsi">Kita sedang belajar DOM.</p>
12
</body>
13
</html>

Isi script.js:

1
console.log("JavaScript berhasil terhubung!");

Sekarang buka index.html menggunakan browser.

Kemudian buka Developer Tools dan pilih tab Console.

Jika semuanya benar, akan muncul:

1
JavaScript berhasil terhubung!

Perhatikan bagian berikut pada HTML:

1
<script src="script.js" defer></script>

Atribut src menunjukkan file JavaScript yang ingin digunakan.

Sedangkan defer membuat browser mengunduh script tanpa menghalangi parsing HTML dan menjalankannya setelah dokumen selesai diparsing.

Dengan begitu, elemen HTML sudah tersedia ketika kode dalam script.js mulai dijalankan.

Untuk script klasik seperti contoh ini, defer merupakan salah satu cara praktis menghindari masalah ketika JavaScript mencoba mengakses elemen yang belum dibuat.

3. Memilih Elemen dengan getElementById()#

Sekarang kita mulai mengakses HTML menggunakan JavaScript.

Pada file index.html, kita mempunyai:

1
<h1 id="judul">Halo, Gabuters!</h1>

Kita bisa memilih elemen tersebut berdasarkan id.

Isi script.js:

1
const judul = document.getElementById("judul");
2

3
console.log(judul);

Jika elemen ditemukan, Console akan menampilkan representasi elemen h1.

Perhatikan:

1
document.getElementById("judul")

document merupakan object yang mewakili dokumen HTML.

Method getElementById() digunakan untuk mencari elemen berdasarkan nilai atribut id.

Kita tidak perlu menuliskan tanda # ketika menggunakan getElementById().

Jika tidak ada elemen dengan id tersebut, hasilnya adalah null.

Contohnya:

1
const elemenTidakAda = document.getElementById("tidak-ada");
2

3
console.log(elemenTidakAda);

Hasilnya:

1
null

Karena itu, pastikan id yang digunakan sesuai dengan HTML.

4. Memilih Elemen dengan querySelector()#

Selain getElementById(), JavaScript menyediakan querySelector().

Method ini menggunakan sintaks CSS selector.

Contohnya:

1
const judul = document.querySelector("#judul");

Tanda # menunjukkan selector berdasarkan id, sama seperti dalam CSS.

Kita juga bisa memilih berdasarkan nama tag.

1
const paragraf = document.querySelector("p");

Atau berdasarkan class.

Misalnya, HTML kita mempunyai:

1
<p class="informasi">Belajar JavaScript itu menyenangkan.</p>

Kita bisa memilihnya menggunakan:

1
const informasi = document.querySelector(".informasi");

Perhatikan perbedaannya:

querySelector() mengembalikan elemen pertama yang cocok dengan selector.

Jika tidak ada elemen yang cocok, hasilnya null.

5. Memilih Banyak Elemen dengan querySelectorAll()#

Bagaimana jika kita ingin mengambil beberapa elemen sekaligus?

Misalnya:

1
<ul>
2
  <li class="kategori">HTML</li>
3
  <li class="kategori">CSS</li>
4
  <li class="kategori">JavaScript</li>
5
</ul>

Gunakan querySelectorAll().

1
const daftarKategori = document.querySelectorAll(".kategori");
2

3
console.log(daftarKategori);

Method tersebut menghasilkan NodeList statis berisi elemen-elemen yang cocok pada saat pemanggilan.

Kita bisa mengulanginya menggunakan forEach().

1
daftarKategori.forEach((kategori) => {
2
  console.log(kategori.textContent);
3
});

Hasilnya:

1
HTML
2
CSS
3
JavaScript

Ini salah satu contoh bagaimana materi array, function, dan perulangan mulai digunakan untuk mengolah elemen halaman.

Perlu diperhatikan bahwa NodeList bukan array biasa, walaupun memiliki beberapa kemampuan yang mirip, seperti forEach().

6. Mengubah Teks dengan textContent#

Sekarang kita coba mengubah isi halaman.

Gunakan HTML berikut:

1
<h1 id="judul">Halo, Gabuters!</h1>

Lalu JavaScript:

1
const judul = document.getElementById("judul");
2

3
judul.textContent = "Selamat Datang di BapakGabut!";

Ketika halaman dibuka, teks pada elemen h1 berubah menjadi:

1
Selamat Datang di BapakGabut!

Kita tidak perlu mengubah isi HTML secara manual.

JavaScript dapat melakukannya setelah halaman dimuat.

1
const namaWebsite = "BapakGabut";
2
const judul = document.getElementById("judul");
3

4
judul.textContent = `Selamat Datang di ${namaWebsite}!`;

1
const deskripsi = document.getElementById("deskripsi");
2

3
deskripsi.innerHTML = "<strong>Belajar DOM JavaScript</strong>";

1
deskripsi.textContent = "<strong>Belajar DOM JavaScript</strong>";

7. Mengenal Event JavaScript#

Sampai sekarang, perubahan halaman terjadi langsung ketika script dijalankan.

Tetapi bagaimana jika kita ingin perubahan terjadi setelah pengguna menekan tombol?

Kita membutuhkan event.

Event adalah kejadian yang dapat dideteksi dan ditangani oleh JavaScript.

Contohnya:

• click: ketika elemen diklik.
• input: ketika nilai input berubah karena interaksi pengguna.
• change: ketika perubahan nilai pada elemen tertentu dikonfirmasi.
• submit: ketika formulir dikirim.
• keydown: ketika tombol keyboard ditekan.

JavaScript dapat menjalankan function sebagai respons terhadap event tersebut.

8. Menangani Klik dengan addEventListener()#

Sekarang kita buat tombol yang mengubah teks.

Isi index.html:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Belajar Event JavaScript</title>
7
  <script src="script.js" defer></script>
8
</head>
9
<body>
10
  <h1 id="judul">Halo, Gabuters!</h1>
11

12
  <button id="tombol" type="button">
13
    Ubah Judul
14
  </button>
15
</body>
16
</html>

Isi script.js:

1
const judul = document.getElementById("judul");
2
const tombol = document.getElementById("tombol");
3

4
tombol.addEventListener("click", () => {
5
  judul.textContent = "Judul berhasil diubah!";
6
});

Sekarang buka halaman dan klik tombol Ubah Judul.

Teks pada h1 akan berubah.

Mari kita pahami bagian ini:

1
tombol.addEventListener("click", () => {
2
  judul.textContent = "Judul berhasil diubah!";
3
});

addEventListener() digunakan untuk mendaftarkan function yang akan dijalankan ketika event tertentu terjadi.

Argument pertama adalah jenis event, yaitu "click".

Argument kedua adalah callback function yang dijalankan saat event tersebut terjadi.

Dalam contoh ini, kita menggunakan arrow function.

1
function ubahJudul() {
2
  judul.textContent = "Judul berhasil diubah!";
3
}
4

5
tombol.addEventListener("click", ubahJudul);

1
ubahJudul

1
ubahJudul()

9. Membaca Input Pengguna#

Sekarang kita coba membuat halaman yang menerima nama pengunjung.

Isi index.html:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Input JavaScript</title>
7
  <script src="script.js" defer></script>
8
</head>
9
<body>
10
  <h1>Form Sambutan</h1>
11

12
  <label for="nama">Nama pengunjung:</label>
13
  <input id="nama" type="text">
14

15
  <button id="sapa" type="button">
16
    Tampilkan Salam
17
  </button>
18

19
  <p id="hasil"></p>
20
</body>
21
</html>

Isi script.js:

1
const inputNama = document.getElementById("nama");
2
const tombolSapa = document.getElementById("sapa");
3
const hasil = document.getElementById("hasil");
4

5
tombolSapa.addEventListener("click", () => {
6
  const nama = inputNama.value;
7

8
  hasil.textContent = `Halo, ${nama}!`;
9
});

Sekarang coba isi nama pada kolom input, kemudian klik tombol.

Pesan sambutan akan muncul di bawahnya.

1
const nama = inputNama.value;

10. Melakukan Validasi Input Sederhana#

Sekarang kita tambahkan validasi.

Kita tidak ingin menampilkan:

1
Halo, !

Ketika pengguna belum mengisi nama.

Ubah script.js menjadi:

1
const inputNama = document.getElementById("nama");
2
const tombolSapa = document.getElementById("sapa");
3
const hasil = document.getElementById("hasil");
4

5
tombolSapa.addEventListener("click", () => {
6
  const nama = inputNama.value.trim();
7

8
  if (nama === "") {
9
    hasil.textContent = "Nama tidak boleh kosong.";
10
    return;
11
  }
12

13
  hasil.textContent = `Halo, ${nama}! Selamat datang di BapakGabut.`;
14
});

Sekarang jika input kosong, program akan menampilkan:

1
Nama tidak boleh kosong.

Method trim() digunakan untuk menghapus whitespace di awal dan akhir string.

Contohnya:

1
console.log("   Gabuters   ".trim());

Hasilnya:

1
Gabuters

Dengan trim(), input yang hanya berisi spasi juga dianggap kosong.

Perhatikan penggunaan return di dalam callback.

Ketika input kosong, callback berhenti setelah menampilkan pesan validasi.

Jadi, pesan sambutan tidak akan dijalankan.

Ini contoh penggunaan function, percabangan, dan DOM secara bersamaan.

Perlu diingat bahwa validasi di browser membantu pengalaman pengguna, tetapi bukan pengganti validasi di server ketika data dikirim ke backend.

11. Menggunakan Event input#

Pada contoh sebelumnya, pengguna harus menekan tombol untuk menampilkan hasil.

Sekarang kita coba membuat teks berubah langsung ketika pengguna mengetik.

Isi HTML:

1
<label for="nama">Nama:</label>
2
<input id="nama" type="text">
3

4
<p id="pratinjau">Halo, Gabuters!</p>

Isi JavaScript:

1
const inputNama = document.getElementById("nama");
2
const pratinjau = document.getElementById("pratinjau");
3

4
inputNama.addEventListener("input", () => {
5
  const nama = inputNama.value.trim();
6

7
  if (nama === "") {
8
    pratinjau.textContent = "Halo, Gabuters!";
9
    return;
10
  }
11

12
  pratinjau.textContent = `Halo, ${nama}!`;
13
});

Sekarang teks pada paragraf akan berubah ketika pengguna mengetik.

Event input sering digunakan untuk fitur seperti:

• Pratinjau teks.
• Penghitung jumlah karakter.
• Validasi input saat mengetik.
• Pencarian interaktif.

Kita akan menggunakan konsep ini lagi ketika membuat mini project JavaScript.

12. Mengubah Tampilan dengan classList#

JavaScript juga dapat mengubah class pada elemen HTML.

Ini berguna karena kita tidak perlu menuliskan semua pengaturan tampilan melalui JavaScript.

Kita bisa menyerahkan urusan desain kepada CSS.

Contohnya, kita ingin membuat tombol yang mengubah warna sebuah kotak.

Isi index.html:

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Belajar classList</title>
7

8
  <style>
9
    .kotak {
10
      padding: 20px;
11
      background-color: #eeeeee;
12
      color: #222222;
13
      border-radius: 8px;
14
    }
15

16
    .aktif {
17
      background-color: #2563eb;
18
      color: #ffffff;
19
    }
20
  </style>
21

22
  <script src="script.js" defer></script>
23
</head>
24
<body>
25
  <div id="kotak" class="kotak">
26
    Kotak informasi BapakGabut
27
  </div>
28

29
  <button id="ubahWarna" type="button">
30
    Ubah Warna
31
  </button>
32
</body>
33
</html>

Isi script.js:

1
const kotak = document.getElementById("kotak");
2
const tombol = document.getElementById("ubahWarna");
3

4
tombol.addEventListener("click", () => {
5
  kotak.classList.toggle("aktif");
6
});

Ketika tombol diklik, class aktif akan ditambahkan jika belum ada.

Jika class tersebut sudah ada, toggle() akan menghapusnya.

Dengan demikian, warna kotak berubah setiap kali tombol diklik.

1
kotak.classList.add("aktif");

1
kotak.classList.remove("aktif");

1
kotak.classList.contains("aktif");

13. Mengenal Event Object#

Ketika event terjadi, browser menyediakan sebuah event object kepada listener.

Object tersebut berisi informasi tentang kejadian yang sedang ditangani.

Contohnya:

1
const tombol = document.getElementById("tombol");
2

3
tombol.addEventListener("click", (event) => {
4
  console.log(event.type);
5
});

Ketika tombol diklik, hasilnya:

1
click

Kita juga bisa mengakses elemen yang menjadi target event.

1
tombol.addEventListener("click", (event) => {
2
  console.log(event.target);
3
});

Pada contoh sederhana ini, target biasanya adalah tombol yang diklik.

Namun, jika sebuah elemen mempunyai elemen anak, event.target dapat merujuk pada elemen anak tersebut.

Sementara itu, event.currentTarget merujuk pada elemen tempat listener sedang dijalankan.

Perbedaan ini akan lebih terasa ketika kita mempelajari event bubbling dan event delegation pada aplikasi yang lebih kompleks.

Untuk sekarang, cukup pahami bahwa event object menyediakan informasi tambahan tentang interaksi pengguna.

14. Menangani Form dengan submit#

Sekarang kita coba menggunakan elemen <form>.

Berbeda dengan contoh tombol biasa, formulir memiliki event submit.

Contoh HTML:

1
<form id="formNama">
2
  <label for="nama">Nama:</label>
3
  <input id="nama" type="text">
4

5
  <button type="submit">Kirim</button>
6
</form>
7

8
<p id="hasil"></p>

JavaScript:

1
const form = document.getElementById("formNama");
2
const inputNama = document.getElementById("nama");
3
const hasil = document.getElementById("hasil");
4

5
form.addEventListener("submit", (event) => {
6
  event.preventDefault();
7

8
  const nama = inputNama.value.trim();
9

10
  if (nama === "") {
11
    hasil.textContent = "Silakan isi nama terlebih dahulu.";
12
    return;
13
  }
14

15
  hasil.textContent = `Terima kasih, ${nama}!`;
16
});

1
event.preventDefault();

15. Membuat Elemen Baru dengan createElement()#

Sejauh ini, kita hanya mengubah elemen HTML yang sudah tersedia.

Tetapi JavaScript juga bisa membuat elemen baru.

Contohnya, kita ingin menambahkan kategori ke dalam daftar.

HTML:

1
<ul id="daftarKategori"></ul>

JavaScript:

1
const daftarKategori = document.getElementById("daftarKategori");
2

3
const itemBaru = document.createElement("li");
4

5
itemBaru.textContent = "JavaScript";
6

7
daftarKategori.appendChild(itemBaru);

Hasilnya, halaman memiliki elemen:

1
<ul id="daftarKategori">
2
  <li>JavaScript</li>
3
</ul>

Method createElement() membuat elemen baru.

textContent mengisi teksnya.

appendChild() menambahkan elemen tersebut sebagai anak dari elemen lain.

1
<ul id="daftarKategori"></ul>

1
const kategori = ["HTML", "CSS", "JavaScript"];
2
const daftarKategori = document.getElementById("daftarKategori");
3

4
kategori.forEach((namaKategori) => {
5
  const item = document.createElement("li");
6

7
  item.textContent = namaKategori;
8

9
  daftarKategori.appendChild(item);
10
});

1
HTML
2
CSS
3
JavaScript

16. Praktik: Filter Artikel Berdasarkan Kategori#

Sekarang kita buat contoh yang lebih lengkap.

Kita ingin menampilkan daftar artikel BapakGabut, kemudian menyediakan pilihan kategori.

Ketika pengguna memilih kategori tertentu, daftar artikel yang tampil akan berubah.

1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Filter Artikel BapakGabut</title>
7

8
  <style>
9
    body {
10
      font-family: Arial, sans-serif;
11
      max-width: 700px;
12
      margin: 40px auto;
13
      padding: 0 16px;
14
      line-height: 1.6;
15
    }
16

17
    label {
18
      display: block;
19
      margin-bottom: 8px;
20
    }
21

22
    select {
23
      padding: 8px;
24
      margin-bottom: 20px;
25
    }
26

27
    li {
28
      margin-bottom: 8px;
29
    }
30
  </style>
31

32
  <script src="script.js" defer></script>
33
</head>
34
<body>
35
  <h1>Daftar Artikel BapakGabut</h1>
36

37
  <label for="filterKategori">Pilih kategori:</label>
38

39
  <select id="filterKategori">
40
    <option value="semua">Semua Kategori</option>
41
    <option value="HTML">HTML</option>
42
    <option value="CSS">CSS</option>
43
    <option value="JavaScript">JavaScript</option>
44
  </select>
45

46
  <p id="jumlahArtikel"></p>
47

48
  <ul id="daftarArtikel"></ul>
49
</body>
50
</html>

1
const artikel = [
2
  {
3
    judul: "Mengenal HTML",
4
    kategori: "HTML"
5
  },
6
  {
7
    judul: "Membuat Struktur Halaman HTML",
8
    kategori: "HTML"
9
  },
10
  {
11
    judul: "Mengenal CSS",
12
    kategori: "CSS"
13
  },
14
  {
15
    judul: "Belajar Flexbox",
16
    kategori: "CSS"
17
  },
18
  {
19
    judul: "Mengenal JavaScript",
20
    kategori: "JavaScript"
21
  }
22
];

1
const filterKategori = document.getElementById("filterKategori");
2
const daftarArtikel = document.getElementById("daftarArtikel");
3
const jumlahArtikel = document.getElementById("jumlahArtikel");

1
function tampilkanArtikel(dataArtikel) {
2
  daftarArtikel.replaceChildren();
3

4
  jumlahArtikel.textContent =
5
    `Ditemukan ${dataArtikel.length} artikel.`;
6

7
  dataArtikel.forEach((item) => {
8
    const elemenArtikel = document.createElement("li");
9

10
    elemenArtikel.textContent =
11
      `${item.judul} — ${item.kategori}`;
12

13
    daftarArtikel.appendChild(elemenArtikel);
14
  });
15
}

1
daftarArtikel.replaceChildren();

1
filterKategori.addEventListener("change", () => {
2
  const kategoriDipilih = filterKategori.value;
3

4
  if (kategoriDipilih === "semua") {
5
    tampilkanArtikel(artikel);
6
    return;
7
  }
8

9
  const hasilFilter = artikel.filter((item) => {
10
    return item.kategori === kategoriDipilih;
11
  });
12

13
  tampilkanArtikel(hasilFilter);
14
});

1
tampilkanArtikel(artikel);

1
const artikel = [
2
  { judul: "Mengenal HTML", kategori: "HTML" },
3
  { judul: "Membuat Struktur Halaman HTML", kategori: "HTML" },
4
  { judul: "Mengenal CSS", kategori: "CSS" },
5
  { judul: "Belajar Flexbox", kategori: "CSS" },
6
  { judul: "Mengenal JavaScript", kategori: "JavaScript" }
7
];
8

9
const filterKategori = document.getElementById("filterKategori");
10
const daftarArtikel = document.getElementById("daftarArtikel");
11
const jumlahArtikel = document.getElementById("jumlahArtikel");
12

13
function tampilkanArtikel(dataArtikel) {
14
  daftarArtikel.replaceChildren();
15

16
  jumlahArtikel.textContent =
17
    `Ditemukan ${dataArtikel.length} artikel.`;
18

19
  dataArtikel.forEach((item) => {
20
    const elemenArtikel = document.createElement("li");
21

22
    elemenArtikel.textContent =
23
      `${item.judul} — ${item.kategori}`;
24

25
    daftarArtikel.appendChild(elemenArtikel);
26
  });
27
}
28

29
filterKategori.addEventListener("change", () => {
30
  const kategoriDipilih = filterKategori.value;
31

32
  if (kategoriDipilih === "semua") {
33
    tampilkanArtikel(artikel);
34
    return;
35
  }
36

37
  const hasilFilter = artikel.filter((item) => {
38
    return item.kategori === kategoriDipilih;
39
  });
40

41
  tampilkanArtikel(hasilFilter);
42
});
43

44
tampilkanArtikel(artikel);

17. Kesalahan Umum Saat Menggunakan DOM dan Event#

1
<h1 id="judul">Halo!</h1>

1
document.querySelector(".judul");

1
document.querySelector("#judul");

1
const nilai = inputAngka.value;

1
tombol.addEventListener("click", ubahJudul());

1
tombol.addEventListener("click", ubahJudul);

1
tombol.addEventListener("click", () => {
2
  ubahJudul();
3
});

18. Latihan Mandiri#

Sekarang giliran Gabuters mencoba.

1
Saya sedang belajar JavaScript DOM!

1
Tombol sudah diklik 3 kali.

1
Halo, [nama pengguna]!

1
document.createElement("li");

1
appendChild();

19. Penutup#

Pada artikel ini, kita sudah belajar bagaimana JavaScript berinteraksi dengan halaman HTML melalui DOM.

Kita mengenal getElementById(), querySelector(), dan querySelectorAll() untuk memilih elemen.

Kita juga belajar mengubah teks menggunakan textContent, mengatur class dengan classList, serta membuat elemen baru menggunakan createElement().

Kemudian, kita menggunakan addEventListener() untuk menangani event seperti click, input, change, dan submit.

Yang paling penting, kita sudah membuat contoh halaman yang benar-benar interaktif menggunakan kombinasi HTML, CSS, dan JavaScript.

Sekarang kita mempunyai bekal untuk mengembangkan mini project yang lebih lengkap.

Pada artikel berikutnya, kita akan membuat Mini Project JavaScript: Membuat Halaman Profil Interaktif.

Kita akan melanjutkan halaman profil dari seri HTML dan CSS, kemudian menambahkan interaksi seperti tombol tema gelap, pesan sambutan, dan validasi formulir sederhana.

Sampai jumpa di mini project berikutnya, Gabuters!