DOM

Sampai di Bab 2, kita sudah belajar cara menyimpan data (variabel) dan cara mengolah data (operator). Sekarang kita memasuki dunia yang lebih menarik: bagaimana JavaScript bisa menyentuh halaman web.

HTML itu seperti struktur rumah. JavaScript adalah orangnya. Nah, DOM adalah peta rumahnya, lengkap dengan letak pintu, jendela, lampu, meja, kursi, dan sebagainya.

Hari ini kita akan belajar:

• Apa itu DOM

• Bagaimana JavaScript membaca dan menemukan elemen

• Bagaimana cara mengambil elemen lewat ID

• Apa bedanya innerText dan innerHTML

• Contoh manipulasi sederhana dalam kehidupan nyata

Tujuan materi ini: Agar kita bisa memahami bagaimana JavaScript berinteraksi dengan HTML, dan bagaimana sebuah halaman web bisa berubah secara dinamis.

Setelah Bab 3 ini, kita akan siap masuk ke topik yang lebih seru seperti mengubah banyak elemen sekaligus, membuat warna berubah hanya dengan klik, sampai membuat interaksi dengan user.

---

A. Apa itu DOM?

DOM adalah singkatan dari Document Object Model. Ketika browser membuka halaman HTML, browser mengubah struktur HTML menjadi sebuah bentuk pohon (tree) yang bisa diakses oleh JavaScript.

DOM itu seperti:

• daftar isi

• peta lokasi

• atau blueprint dari sebuah bangunan

Setiap elemen HTML (seperti <p>, <div>, <h1>) dianggap sebagai sebuah objek di dalam tree tersebut.

Contoh struktur DOM:

document
 └── html
      ├── head
      └── body
           ├── h1
           ├── p
           └── div

JavaScript bisa masuk ke pohon ini, mencari elemen tertentu, lalu:

• membaca isinya

• mengganti teksnya

• mengubah warnanya

• menyembunyikannya

• bahkan membuatnya hidup dan interaktif

---

B. Analogi Dunia Nyata

Bayangkan kita berada di sebuah perpustakaan besar.

• HTML = bangunan perpustakaannya

• Elemen HTML = rak-rak buku

• ID = nomor rak unik

• DOM = peta lengkap lokasi semua rak

• JavaScript = petugas yang membawa peta untuk menemukan rak tertentu

Kalau kita tahu nomor raknya (ID), kita bisa langsung menuju ke lokasi itu tanpa perlu menyusuri semua lorong.

Inilah yang dilakukan oleh:

document.getElementById("namaRak");

---

C. document.getElementById()

Ini adalah cara JavaScript untuk mengambil satu elemen berdasarkan ID.

Format penulisan:

document.getElementById("idElemen");

Contoh di HTML:

<p id="title">Hello</p>

Cara mengambilnya:

let x = document.getElementById("title");

Sekarang variabel x berisi objek <p id="title">.

Mengubah isinya:

x.innerText = "Hi!";

Hasil: teks “Hello” berubah menjadi “Hi!”.

---

D. Perbedaan innerText dan innerHTML

1. innerText

Mengambil/menuliskan teks biasa (tanpa memproses tag HTML).

<p id="info">Hello</p>

document.getElementById("info").innerText = "<b>Hi</b>";

Hasil tampilan di halaman:

<b>Hi</b>

(bukan bold, hanya teks)

---

2. innerHTML

Mengambil/menuliskan HTML beserta tag-nya.

document.getElementById("info").innerHTML = "<b>Hi</b>";

Hasil tampilan:

Hi (bold)

---

E. Contoh Kasus Dunia Nyata

1) Menampilkan nama user setelah login

<p id="welcome"></p>

<script>
    let nama = "Rama";
    document.getElementById("welcome").innerText = "Selamat datang, " + nama;
</script>

---

2) Update harga otomatis

Pada website kasir:

<p id="harga">Rp0</p>

<script>
let total = 15000;
document.getElementById("harga").innerText = "Rp" + total;
</script>

---

3) Mengganti pengumuman secara realtime

<h1 id="judul">Pengumuman Lama</h1>

<script>
document.getElementById("judul").innerText = "Pengumuman Baru Telah Terbit";
</script>

---

4) Menyembunyikan elemen dengan menghapus isinya

<p id="demo">ABC</p>

<script>
document.getElementById("demo").innerText = "";
</script>

Hasil: elemen masih ada, tetapi isinya kosong.

---

5) Mengambil angka dan mengolahnya

<p id="data">5</p>

<script>
let x = parseInt(document.getElementById("data").innerText) * 2;
// x = 10
</script>

---

Kesimpulan

Di Bab 3 ini kita sudah mempelajari fondasi yang sangat penting tentang DOM:

• DOM adalah peta/representasi HTML di dalam browser

• JavaScript bisa mengakses elemen dengan document.getElementById()

• innerText = teks biasa, innerHTML = teks + tag

• DOM memungkinkan halaman web berubah secara dinamis

• Banyak contoh nyata: update harga, update judul, menyapa user, dan lainnya

Mari kita merenung sebentar:

Kalau kita bisa mencari dan mengubah satu elemen HTML, apa saja yang bisa kita buat di sebuah halaman web?

Misalnya:

• Dashboard yang update angkanya setiap detik

• Pengumuman otomatis berubah sesuai jadwal

• Form yang menampilkan hasil perhitungan realtime

• Teks yang berubah sesuai interaksi user

Cobalah tulis satu ide kecil yang ingin kita buat memakai getElementById.

Karena setelah ini, di Bab 4, kita akan masuk ke level berikutnya: 🎯 Mengambil dan memanipulasi banyak elemen sekaligus Menggunakan getElementsByTagName() dan getElementsByClassName().

Ini adalah langkah awal untuk membuat website yang interaktif dan “dinamis massal”.