Sign in Subscribe
Javascript

DOM dalam JavaScript dan Cara Kerjanya

DOM dalam JavaScript dan Cara Kerjanya
Photo by kazuend / Unsplash

DOM (Document Object Model) adalah struktur hierarki yang merepresentasikan halaman web dalam bentuk objek yang bisa dimanipulasi menggunakan JavaScript. Bayangkan DOM seperti pohon dengan cabang dan ranting, di mana setiap elemen HTML adalah sebuah node dalam pohon tersebut.

Ketika sebuah halaman web dimuat di browser, browser akan mengubah kode HTML menjadi struktur DOM yang bisa diakses dan dimanipulasi dengan JavaScript.

Contoh sederhana struktur DOM dari sebuah halaman HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar DOM</title>
  </head>
  <body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah paragraf.</p>
  </body>
</html>

Jika digambarkan dalam struktur DOM, kurang lebih akan terlihat seperti ini:

Document
 ├── html
 │   ├── head
 │   │   ├── title
 │   ├── body
 │       ├── h1
 │       ├── p

Setiap elemen HTML menjadi node dalam pohon DOM, yang bisa diakses dan dimanipulasi menggunakan JavaScript.

Cara Kerja DOM

Ketika halaman web dimuat, browser membuat representasi DOM yang bisa diakses melalui JavaScript. DOM memungkinkan kita untuk:

✅ Menyeleksi elemen dalam halaman web. ✅ Mengubah atau menambahkan elemen HTML dan atribut. ✅ Mengubah gaya (CSS) elemen. ✅ Menanggapi event pengguna seperti klik atau input. ✅ Menghapus elemen dari halaman.

Semua ini bisa dilakukan dengan menggunakan JavaScript DOM API.

Menyeleksi Elemen dalam DOM

Sebelum memanipulasi elemen dalam halaman web, kita harus menyeleksinya terlebih dahulu. Ada beberapa cara untuk menyeleksi elemen DOM menggunakan JavaScript:

1. getElementById() – Seleksi Elemen Berdasarkan ID

document.getElementById("judul");

Contoh HTML:

<h1 id="judul">Belajar DOM</h1>

Dengan kode di atas, kita bisa mendapatkan elemen <h1> dengan id="judul".

2. getElementsByClassName() – Seleksi Elemen Berdasarkan Kelas

document.getElementsByClassName("paragraf");

Contoh HTML:

<p class="paragraf">Paragraf pertama</p>
<p class="paragraf">Paragraf kedua</p>

Metode ini mengembalikan kumpulan elemen dengan class yang sama.

3. getElementsByTagName() – Seleksi Elemen Berdasarkan Tag

document.getElementsByTagName("p");

Cara ini mengembalikan semua elemen <p> dalam halaman.

4. querySelector() – Seleksi Elemen dengan Selector CSS

document.querySelector(".paragraf");

Hanya mengembalikan elemen pertama yang cocok dengan selector CSS.

5. querySelectorAll() – Seleksi Banyak Elemen dengan Selector CSS

document.querySelectorAll(".paragraf");

Mengembalikan semua elemen yang cocok dengan selector CSS.

Manipulasi Elemen DOM

Setelah menyeleksi elemen, kita bisa mengubah atau menambah properti elemen tersebut.

1. Mengubah Konten Elemen

Menggunakan innerHTML atau textContent:

const elemen = document.getElementById("judul");
elemen.innerHTML = "DOM itu Seru!";

Sebelum:

<h1 id="judul">Halo, Dunia!</h1>

Setelah:

<h1 id="judul">DOM itu Seru!</h1>

2. Mengubah Atribut Elemen

Kita bisa mengubah atribut elemen HTML, seperti src, href, atau id.

document.getElementById("gambar").src = "gambar-baru.jpg";

3. Menambahkan dan Menghapus Elemen

Menambahkan Elemen

const paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini paragraf baru.";
document.body.appendChild(paragrafBaru);

Menghapus Elemen

const elemen = document.getElementById("judul");
elemen.remove();

Menangani Event dalam DOM

Event dalam DOM adalah aksi yang terjadi di halaman web, seperti klik, input, atau hover.

1. Event onclick – Menjalankan Fungsi Saat Elemen Diklik

const tombol = document.getElementById("tombol");
tombol.onclick = function() {
  alert("Tombol diklik!");
};

2. Event Listener – Cara Lebih Fleksibel

document.getElementById("tombol").addEventListener("click", function() {
  alert("Tombol diklik!");
});

3. Event onchange – Menjalankan Fungsi Saat Input Berubah

document.getElementById("input").onchange = function() {
  console.log("Input berubah!");
};

Kesimpulan

  • DOM adalah struktur hierarki halaman web yang bisa dimanipulasi dengan JavaScript.
  • Menyeleksi elemen dalam DOM bisa menggunakan getElementById(), querySelector(), dll.
  • Manipulasi elemen bisa dilakukan dengan mengubah teks (innerHTML), atribut, atau menambah/menghapus elemen.
  • Event listener memungkinkan kita menangani aksi pengguna seperti klik dan input.

Dengan memahami cara kerja DOM, kita bisa membangun halaman web yang lebih dinamis dan interaktif. Langsung coba dan eksplor lebih dalam!

Read next