🌐 DOM Dasar

DOM atau Document Object Model itu bisa kamu bayangkan seperti peta atau blueprint dari seluruh halaman HTML. Jadi saat sebuah halaman dimuat, browser akan mengubah kode HTML-nya menjadi struktur pohon (tree) — setiap elemen HTML (seperti <h1>, <p>, <img>) jadi “node” atau cabang dari pohon itu. Nah, JavaScript bisa mengakses, mencari, bahkan memanipulasi node-node itu lewat DOM. Ini artinya, kita bisa bikin halaman berubah secara langsung dari JavaScript, tanpa harus reload.
Misalnya kamu punya tombol, lalu ingin saat tombol diklik, warna background halaman berubah — itu semua bisa dilakukan lewat DOM! Kita tinggal “select” elemen yang ingin diubah menggunakan document.querySelector() atau getElementById(), lalu gunakan JavaScript untuk mengganti teks, style, atau bahkan menambahkan elemen baru. DOM ini penting banget karena jadi dasar dari interaktivitas di halaman web, seperti efek animasi, respons saat tombol ditekan, dan lainnya. Jadi kalau kamu ingin bikin web yang hidup dan interaktif, DOM adalah teman dekatmu!

🎯 Struktur Umum Manipulasi DOM

// Misalkan kita punya HTML ini: ...

// 1. Memilih (Select) elemen berdasarkan ID-nya
const paragrafSalam = document.getElementById("salam");

// 2. Memanipulasi (Manipulate) elemen yang sudah dipilih
// a. Mengubah isi teks di dalamnya
paragrafSalam.innerText = "Halo Dunia dari JavaScript!";

// b. Mengubah gayanya (misal: warna teks)
paragrafSalam.style.color = "blue";

Penjelasan dari konsep di atas sebagai berikut:

Memilih Elemen: Langkah pertama adalah memilih elemen mana yang ingin kita ubah. Ada beberapa cara populer:
- document.getElementById('id-elemen'): Cara paling umum dan cepat untuk memilih satu elemen unik berdasarkan atribut id-nya.
- document.querySelector('css-selector'): Cara fleksibel untuk memilih elemen pertama yang cocok dengan selector CSS (contoh: 'h1', '.nama-kelas', '#id-elemen').
Mengubah Konten: Setelah elemen dipilih, kita bisa mengubah isinya.
- .innerText: Mengubah konten teks dari sebuah elemen.
- .innerHTML: Mengubah seluruh konten HTML di dalam sebuah elemen, termasuk tag-tag lain.
Mengubah Style: Kita bisa langsung mengubah properti CSS dari sebuah elemen melalui .style. Perhatikan bahwa properti CSS yang menggunakan tanda hubung (seperti background-color) diubah menjadi format camelCase (backgroundColor) di JavaScript.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Kartu Profil</title>
  </head>
  <body>
    <h1 id="nama-profil">Nama Akan Muncul di Sini</h1>
    <p id="deskripsi-profil">Deskripsi akan muncul di sini.</p>
    <img id="foto-profil" src="" alt="foto profil" width="150" />

    <script>
      // Data profil
      const nama = "Siti Nurbaya";
      const deskripsi = "Seorang Web Developer dari Makassar.";
      const urlFoto = "https://i.pravatar.cc/150"; // URL gambar placeholder

      // Memilih semua elemen yang dibutuhkan
      const elemenNama = document.getElementById("nama-profil");
      const elemenDeskripsi = document.getElementById("deskripsi-profil");
      const elemenFoto = document.getElementById("foto-profil");

      // Memanipulasi elemen dengan data yang ada
      elemenNama.innerText = nama;
      elemenDeskripsi.innerText = deskripsi;
      elemenFoto.setAttribute("src", urlFoto);

      console.log("Profil berhasil dimuat!");
    </script>
  </body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Gunakan getElementById jika memungkinkan, karena ini adalah cara tercepat untuk memilih elemen. Jika elemen tidak punya ID, querySelector adalah pilihan modern yang sangat fleksibel.