DOM (Document Object Model)

1. Apa itu DOM?

DOM adalah Document Object Model, representasi struktur halaman HTML dalam bentuk tree (pohon). Setiap elemen jadi objek javascript yang bisa kamu akses dan ubah.

Contoh:


<body>
  <div>
    <p>Hello HSI</p>
  </div>
</body>

maka DOM tree-nya:


body
└── div
    └── p (Hello)

2. Mengakses Elemen DOM

File HTML


<p id="judul">Hello Santri!</p>

File Javascript untuk mengakses DOM sebagai berikut:


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

3. Modifikasi DOM

Setelah mengakses DOM dari sebuah elemen, kita bisa memodifikasinya menggunakan Javascript. Berikut contoh modifikasinya:


judul.textContent = "Halo, DOM!";
 
judul.style.color = "red";
 
judul.setAttribute("class", "text-lg");
 
judul.classList.add("bold");
judul.classList.remove("italic");

4. Menambah/Menghapus Elemen


// Menambah elemen
const el = document.createElement("p");
el.textContent = "Paragraf baru";
document.body.appendChild(el);


// Menghapus elemen
document.body.removeChild(el);

5. Event Listener

File html


<button id="klik">Klik saya</button>

File Javascript


document.getElementById("klik").addEventListener("click", () => {
  alert("Tombol diklik!");
});

Eksplorasi Langsung di Browser

DOM juga bisa diakses langsung lewat browser.

Buka halaman HTML kosong.
Tekan F12 → Buka tab Console.
Coba ketik:


document.body.style.backgroundColor = 'lightblue'