Belajar DOM dan Event Handling dalam JavaScript

Pelajari cara memanipulasi DOM dan menangani event seperti klik dan input di JavaScript. Panduan praktis untuk membuat website interaktif dengan mudah.

🧠 Apa Itu DOM?

DOM (Document Object Model) adalah representasi struktur dari dokumen HTML dalam bentuk objek JavaScript. Saat halaman web dimuat, browser mengubah HTML menjadi struktur pohon (tree) yang bisa diakses dan dimanipulasi dengan JavaScript.

Contoh HTML:

1<p id="teks">Halo dunia!</p>
2

1<p id="teks">Halo dunia!</p>
2

Dengan JavaScript, kamu bisa mengakses elemen ini:

1let paragraf = document.getElementById("teks");
2console.log(paragraf.innerText); // Output: Halo dunia!
3

1let paragraf = document.getElementById("teks");
2console.log(paragraf.innerText); // Output: Halo dunia!
3

🎯 Cara Akses Elemen DOM

Ada beberapa metode yang sering digunakan:

1document.getElementById("id")           // by ID
2document.getElementsByClassName("class") // by class (HTMLCollection)
3document.getElementsByTagName("tag")     // by tag (HTMLCollection)
4document.querySelector("selector")       // by CSS selector (mengembalikan satu elemen)
5document.querySelectorAll("selector")    // by CSS selector (semua elemen)
6

1document.getElementById("id")           // by ID
2document.getElementsByClassName("class") // by class (HTMLCollection)
3document.getElementsByTagName("tag")     // by tag (HTMLCollection)
4document.querySelector("selector")       // by CSS selector (mengembalikan satu elemen)
5document.querySelectorAll("selector")    // by CSS selector (semua elemen)
6

Contoh:

1let tombol = document.querySelector("#submit");
2

1let tombol = document.querySelector("#submit");
2

✍️ Mengubah Konten dan Atribut

Mengubah teks:

1paragraf.innerText = "Halo JavaScript!";
2

1paragraf.innerText = "Halo JavaScript!";
2

Mengubah HTML:

1paragraf.innerHTML = "<strong>Bold Text</strong>";
2

1paragraf.innerHTML = "<strong>Bold Text</strong>";
2

Mengubah atribut:

1let gambar = document.querySelector("img");
2gambar.src = "gambar-baru.jpg";
3

1let gambar = document.querySelector("img");
2gambar.src = "gambar-baru.jpg";
3

🖱️ Menangani Event di JavaScript

Event adalah interaksi pengguna, seperti klik, ketik, atau submit.

Contoh event handler:

1let tombol = document.getElementById("klikSaya");
2tombol.addEventListener("click", function () {
3  alert("Tombol diklik!");
4});
5

1let tombol = document.getElementById("klikSaya");
2tombol.addEventListener("click", function () {
3  alert("Tombol diklik!");
4});
5

Beberapa event umum:

click: saat elemen diklik
mouseover: saat mouse berada di atas elemen
keyup: saat tombol keyboard dilepas
submit: saat form dikirim

🧪 Contoh: Interaksi Sederhana

HTML:

1<input type="text" id="nama" />
2<button id="tampilkan">Tampilkan</button>
3<p id="output"></p>
4

1<input type="text" id="nama" />
2<button id="tampilkan">Tampilkan</button>
3<p id="output"></p>
4

JavaScript:

1let input = document.getElementById("nama");
2let btn = document.getElementById("tampilkan");
3let output = document.getElementById("output");
4
5btn.addEventListener("click", function () {
6  output.innerText = `Halo, ${input.value}!`;
7});
8

1let input = document.getElementById("nama");
2let btn = document.getElementById("tampilkan");
3let output = document.getElementById("output");
4
5btn.addEventListener("click", function () {
6  output.innerText = `Halo, ${input.value}!`;
7});
8

🛠️ Tips Praktis

Pastikan DOM sudah dimuat sebelum JavaScript dijalankan, atau tempatkan <script> di bagian akhir body.
Gunakan addEventListener daripada onclick untuk fleksibilitas lebih tinggi.
Jangan takut mencoba langsung di console browser atau playground seperti CodePen, JSFiddle, atau repl.it.

Jika kamu sudah memahami materi ini, kita bisa lanjut membuat latihan soal seputar DOM dan event handling.

programming

html

javascript