Praktikum 5

25 Apr 2025 - M.Hafidz Firansyah

Memahami DOM dalam JavaScript

Di balik layar antarmuka web yang kita lihat, ada denyut nadi tak kasat mata — DOM, tempat logika dan estetika saling menyapa. Di sinilah JavaScript tidak hanya menjadi bahasa, tapi tangan yang bisa menyentuh dan membentuk ulang realitas halaman.

📖 Apa Itu DOM?

Bayangkan struktur HTML sebagai pohon kehidupan. DOM (Document Object Model) adalah bentuk abstrak dari pohon itu — setiap tag menjadi cabang, setiap atribut menjadi daun, dan JavaScript adalah angin yang bisa menggoyahkan atau bahkan menumbangkannya kembali.

DOM membuat HTML dapat dibaca, dicari, dan diubah melalui JavaScript. Bukan salinan, melainkan cermin langsung dari dokumen yang kamu lihat di layar.

🔍 Menemukan Elemen di Tengah Semesta HTML

JavaScript punya banyak cara untuk menyentuh elemen yang tersembunyi di dalam DOM:

◾ getElementById()

Paling to the point — satu ID, satu elemen.

let elemen = document.getElementById("judul");

◾ getElementsByClassName()

Seperti memanggil semua yang memakai seragam yang sama.

let kumpulan = document.getElementsByClassName("kotak");

◾ getElementsByTagName()

Ingin bicara dengan seluruh jenis elemen, misalnya semua <p>?

let paragraf = document.getElementsByTagName("p");

◾ querySelector()

Cerdas dan elegan — ambil elemen pertama yang cocok dengan selector CSS.

let elemen = document.querySelector(".banner h1");

◾ querySelectorAll()

Saat satu elemen tak cukup, gunakan ini untuk mengumpulkan semuanya.

let semua = document.querySelectorAll("ul li");

📝 Menulis Ulang Realitas: Mengubah Isi Halaman

HTML bukan sesuatu yang kaku. Ia bisa disulap.

◾ innerHTML

Mengganti isi dengan potensi HTML baru.

elemen.innerHTML = "<em>Halo, Dunia!</em>";

◾ textContent

Lebih sederhana, lebih aman. Tak terpengaruh tag HTML.

elemen.textContent = "Teks polos tapi aman.";

🎨 Sentuhan Estetika: Mengatur Gaya dengan JavaScript

Bukan hanya isi, penampilan pun bisa kamu ubah.

elemen.style.color = "indigo";
elemen.style.backgroundColor = "#f0f0f0";
elemen.style.fontWeight = "bold";

DOM adalah kanvas, JavaScript adalah kuasnya.

🧩 Bermain dengan Atribut

HTML menyimpan banyak informasi dalam atribut — dan semuanya bisa dimanipulasi.

elemen.setAttribute("title", "Tooltip ini dari JS");
let nilai = elemen.getAttribute("title");

🌱 Menumbuhkan & Menghapus Elemen

DOM bukan museum. Ia hidup, bisa bertambah dan berkurang.

◾ Menambahkan Elemen

let baru = document.createElement("div");
baru.textContent = "Elemen segar dari JavaScript.";
document.body.appendChild(baru);

◾ Menghapus Elemen

let target = document.getElementById("iklan");
target.remove();

⚡ Menghidupkan Interaksi: Event Listener

Web bukan hanya untuk dibaca — tapi untuk dirasakan.

let tombol = document.getElementById("klikAku");
tombol.addEventListener("click", () => {
  alert("Terima kasih telah berinteraksi.");
});

🕰️ Jangan Terburu-buru: Tunggu DOM Selesai Dimuat

Sama seperti kamu tidak bisa bicara dengan rumah yang belum selesai dibangun, jangan manipulasi DOM sebelum siap.

document.addEventListener("DOMContentLoaded", () => {
  // DOM sudah siap, silakan beraksi
});

🎯 Intisari

© 2025 M. Hafidz Firansyah - Politeknik Negeri Lhokseumawe