📘 Materi Lengkap JavaScript DOM

📘 Materi Lengkap JavaScript DOM

DOM (Document Object Model) adalah antarmuka pemrograman untuk dokumen HTML. Dengan DOM, JavaScript dapat mengakses, memanipulasi, dan mengubah elemen, atribut, serta gaya CSS pada halaman web.

1. Apa itu DOM?

DOM merepresentasikan halaman web sebagai sebuah pohon (tree) dengan struktur hirarki. Setiap elemen HTML dianggap sebagai node (simpul). Dengan JavaScript, kita bisa mengubah node tersebut.

Contoh Struktur DOM:

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

2. Mengakses Elemen DOM

Untuk mengambil elemen di HTML, kita menggunakan document object. Beberapa metode yang umum:

• document.getElementById("id")
• document.getElementsByClassName("class")
• document.getElementsByTagName("tag")
• document.querySelector("selector")
• document.querySelectorAll("selector")

Contoh:

// HTML
<p id="demo">Halo DOM</p>

// JavaScript
let teks = document.getElementById("demo");
console.log(teks.innerHTML); // Output: Halo DOM

3. Manipulasi Konten

Kita bisa mengubah teks, HTML, dan atribut suatu elemen.

// Ubah teks
document.getElementById("demo").innerText = "Teks baru";

// Ubah HTML
document.getElementById("demo").innerHTML = "<b>Tebal</b>";

// Ubah atribut
document.getElementById("gambar").src = "foto.png";

4. Manipulasi Style

DOM memungkinkan kita mengubah CSS elemen menggunakan properti .style.

document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "20px";

5. Event Handling

Event adalah aksi pengguna seperti klik, hover, atau input. Kita bisa menambahkan event listener untuk merespon aksi tersebut.

// HTML
<button id="klikBtn">Klik Saya</button>

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

6. Membuat & Menghapus Elemen

Kita bisa menambahkan atau menghapus elemen menggunakan createElement() dan remove().

// Buat elemen baru
let p = document.createElement("p");
p.innerText = "Paragraf baru!";
document.body.appendChild(p);

// Hapus elemen
p.remove();

7. Studi Kasus DOM

Contoh: Tombol yang menambah daftar item.

// HTML
<ul id="list"></ul>
<button id="addBtn">Tambah Item</button>

// JavaScript
let i = 1;
document.getElementById("addBtn").addEventListener("click", function() {
  let li = document.createElement("li");
  li.innerText = "Item " + i;
  document.getElementById("list").appendChild(li);
  i++;
});