I. Pendahuluan

Dalam pengembangan website interaktif, kita tidak hanya menampilkan teks dan gambar statis. Dengan JavaScript, kita bisa membuat elemen di halaman web menjadi dinamis dan merespons interaksi pengguna. Salah satu komponen penting untuk ini adalah DOM. Artikel ini akan membahas dasar-dasar DOM dan bagaimana cara memanipulasinya dengan JavaScript.

II. Apa Itu DOM?

DOM atau Document Object Model adalah representasi struktur halaman HTML dalam bentuk objek yang bisa diakses dan dimanipulasi menggunakan JavaScript. Dengan DOM, kita bisa:

  • Mengubah teks dan konten HTML.

  • Menambahkan atau menghapus elemen.

  • Merespons klik, input, dan interaksi pengguna lainnya.

III. Cara Mengakses Elemen dengan DOM

Kita bisa mengakses elemen HTML menggunakan beberapa metode berikut:

javascript
document.getElementById("judul");
document.getElementsByClassName("kotak");
document.querySelector("p");
document.querySelectorAll(".item");

Contoh:

html
<h1 id="judul">Halo Dunia</h1>
<script>
const judul = document.getElementById("judul");
console.log(judul.innerText); // Menampilkan "Halo Dunia"
</script>

IV. Mengubah Konten HTML dengan DOM

Kita bisa mengubah teks atau isi HTML dari suatu elemen:

javascript
judul.innerText = "Selamat Datang!";
judul.style.color = "blue";

V. Menangani Event (Kejadian)

DOM juga bisa digunakan untuk menangani event seperti klik, input, dan hover.

html
<button id="klikSaya">Klik Saya</button>
<p id="pesan"></p>
<script>
const tombol = document.getElementById("klikSaya");
const pesan = document.getElementById("pesan");

tombol.addEventListener("click", () => {
pesan.innerText = "Tombol sudah diklik!";
});
</script>

VI. Menambahkan dan Menghapus Elemen HTML

Kita bisa menambahkan elemen baru ke halaman:

javascript
const paragrafBaru = document.createElement("p");
paragrafBaru.innerText = "Ini paragraf tambahan.";
document.body.appendChild(paragrafBaru);

Atau menghapus elemen:

javascript
document.body.removeChild(paragrafBaru);

VII. Kesimpulan

DOM adalah jembatan antara JavaScript dan HTML. Dengan menguasai DOM, kita bisa membuat website yang dinamis dan interaktif. Belajar DOM adalah langkah penting untuk kamu yang ingin menjadi front-end developer.

Penulis: Asdwipa Septiade Giling
NIM: 23156201008
Jurusan: Sistem Komputer, STIMIK Catur Sakti Kendari