XPdKyZ3Dx8AsjrBpycdAEdBz2M6yyUpdeYe1l6qN
Bookmark

Mengenal DOM di JavaScript: Penjelasan Lengkap dan Contoh Penggunaan

... menit baca
Dengarkan

 

Document Object Model

Apa itu DOM di JavaScript?

DOM (Document Object Model) adalah representasi dari struktur halaman web dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan JavaScript. Dengan DOM, kita bisa membaca, mengubah, menambah, atau menghapus elemen HTML secara dinamis tanpa harus memuat ulang halaman.

DOM diciptakan oleh browser setiap kali sebuah halaman web dimuat. Semua elemen HTML seperti <p>, <div>, <img> akan direpresentasikan sebagai node di dalam tree structure.

Contoh konsep DOM

konsep DOM

Struktur DOM

Struktur DOM berbentuk tree (pohon) yang terdiri dari node:

  • Document Node → Akar dari DOM, mewakili seluruh halaman.
  • Element Node → Mewakili tag HTML (<div>, <h1>, dll).
  • Text Node → Teks di dalam elemen HTML.
  • Attribute Node → Atribut dari elemen (class, id, dll).

Contoh DOM Tree

<html>
  <body>
    <h1>Hello World</h1>
    <p>Belajar DOM</p>
  </body>
</html>

Akan direpresentasikan sebagai

Representasi DOM Tree

Mengapa DOM Penting dalam JavaScript?

DOM penting karena memungkinkan kita:

  • Memanipulasi konten (mengubah teks, gambar, dan elemen lainnya).
  • Menangani event (klik, input, hover, dll).
  • Membuat interaksi dinamis pada website.
  • Menambah dan menghapus elemen tanpa reload halaman.

Contoh kasus kapan DOM digunakan:

  • Membuat form validation.
  • Menampilkan popup atau modal.
  • Mengupdate list produk di e-commerce secara real-time.
  • Mengubah tema website (dark mode & light mode).
  • Menambahkan efek interaktif (animasi, slider, dll).

Cara Mengakses DOM

JavaScript menyediakan banyak method untuk mengakses DOM

1. document.getElementById()

Mengambil elemen berdasarkan id.

<p id="judul">Halo Dunia!</p>
<script>
  let element = document.getElementById("judul");
  console.log(element.innerText); // Halo Dunia!
</script>

2. document.getElementsByClassName()

Mengambil elemen berdasarkan class.

<p class="teks">Paragraf 1</p>
<p class="teks">Paragraf 2</p>
<script>
  let elements = document.getElementsByClassName("teks");
  console.log(elements[0].innerText); // Paragraf 1
</script>

3. document.getElementsByTagName()

Mengambil elemen berdasarkan tag.

<h2>Judul</h2>
<h2>Sub Judul</h2>
<script>
  let elements = document.getElementsByTagName("h2");
  console.log(elements.length); // 2
</script>

4. document.querySelector()

Mengambil elemen pertama yang cocok dengan selector CSS.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<script>
  let box = document.querySelector(".box");
  console.log(box.innerText); // Box 1
</script>

5. document.querySelectorAll()

Mengambil semua elemen yang cocok dengan selector CSS.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<script>
  let boxes = document.querySelectorAll(".box");
  boxes.forEach(b => console.log(b.innerText));
  // Box 1
  // Box 2
</script>

Manipulasi DOM

Setelah elemen diambil, kita bisa memanipulasinya

Mengubah Teks

<p id="teks">Hello</p>
<script>
  document.getElementById("teks").innerText = "Hello World!";
</script>

Mengubah HTML

<div id="konten"></div>
<script>
  document.getElementById("konten").innerHTML = "<b>Teks Tebal</b>";
</script>

Mengubah Atribut

<img id="gambar" src="lama.jpg">
<script>
  document.getElementById("gambar").src = "baru.jpg";
</script>

Mengubah Style

<p id="paragraf">Teks ini berwarna biru</p>
<script>
  document.getElementById("paragraf").style.color = "blue";
</script>

Menambahkan dan Menghapus Elemen

Menambahkan Elemen

<ul id="list"></ul>
<script>
  let li = document.createElement("li");
  li.innerText = "Item Baru";
  document.getElementById("list").appendChild(li);
</script>

Menghapus Elemen

<ul id="list">
  <li>Item 1</li>
</ul>
<script>
  let list = document.getElementById("list");
  list.removeChild(list.firstElementChild);
</script>

Event pada DOM

Event adalah aksi yang terjadi di halaman (klik, hover, input, dll). Kita bisa menanganinya dengan event listener.

Contoh Event Click

<button id="tombol">Klik Saya</button>
<script>
  document.getElementById("tombol").addEventListener("click", function() {
    alert("Tombol diklik!");
  });
</script>

Contoh Event Input

<input type="text" id="nama">
<script>
  document.getElementById("nama").addEventListener("input", function(e) {
    console.log("Isi input:", e.target.value);
  });
</script>

Kesimpulan

  • DOM adalah representasi objek dari struktur HTML yang memungkinkan JavaScript berinteraksi dengan halaman web.
  • DOM digunakan untuk mengakses, memanipulasi, dan mengelola event pada elemen HTML.
  • JavaScript menyediakan banyak method seperti getElementById(), querySelector(), hingga createElement() untuk memanipulasi DOM.
  • Pemahaman DOM sangat penting untuk membuat website yang interaktif dan dinamis.

Related Posts
Posting Komentar

Related Posts

Posting Komentar