Pengenalan DOM dan Selector dalam JavaScript

DOM (Document Object Model) adalah representasi struktur halaman web dalam bentuk objek JavaScript. Setiap elemen HTML seperti <p>, <div>, atau <img> bisa diakses, diubah, atau dihapus melalui DOM. Jadi, dalam tutorial kali ini kita akan bahas tentang DOM dan Selector dalam JavaScript.

Sederhananya: DOM adalah jembatan antara HTML (struktur) dan JavaScript (logika).

Contoh struktur HTML:

<h1 id="judul">Selamat Datang!</h1>
<p class="deskripsi">Belajar JavaScript itu seru!</p>

Dengan JavaScript, kamu bisa mengubah isi, warna, atau gaya elemen di atas secara dinamis tanpa harus memuat ulang halaman.

1. Mengakses Elemen Menggunakan Selector

Untuk berinteraksi dengan elemen HTML, JavaScript menyediakan beberapa metode selector.

`document.getElementById()`

Digunakan untuk memilih elemen berdasarkan id.

let judul = document.getElementById("judul");
console.log(judul.innerText); // Menampilkan teks di dalam <h1>

`document.querySelector()`

Digunakan untuk memilih elemen dengan selector CSS, misalnya #id, .class, atau tag.

let deskripsi = document.querySelector(".deskripsi");
console.log(deskripsi.innerText);

querySelector() lebih fleksibel karena bisa pakai selector seperti di CSS:

document.querySelector("p");         // Elemen <p> pertama
document.querySelector("#judul");    // Berdasarkan id
document.querySelector(".deskripsi"); // Berdasarkan class

2. Mengubah Teks Elemen

Kamu bisa mengubah teks di dalam elemen menggunakan properti innerText atau textContent.

let judul = document.getElementById("judul");
judul.innerText = "Belajar DOM JavaScript!";

Hasil:
Teks <h1> akan berubah menjadi:

Belajar DOM JavaScript!

⚡ innerText menampilkan teks yang terlihat oleh pengguna, sedangkan textContent menampilkan semua teks termasuk yang tersembunyi oleh CSS.

3. Mengubah Atribut Elemen

Kamu juga bisa mengubah atribut seperti src, href, atau alt.

Contoh:

<img id="gambar" src="foto1.jpg" alt="Foto 1">

Ubah dengan JavaScript:

let gambar = document.getElementById("gambar");
gambar.setAttribute("src", "foto2.jpg");
gambar.setAttribute("alt", "Foto 2");

Sekarang gambar akan berubah menjadi foto2.jpg.

Gunakan getAttribute() untuk mengambil nilai atribut, dan setAttribute() untuk mengubahnya.

4. Mengubah Gaya CSS Secara Dinamis

JavaScript bisa mengubah tampilan elemen menggunakan properti .style.

let deskripsi = document.querySelector(".deskripsi");
deskripsi.style.color = "blue";
deskripsi.style.fontSize = "20px";
deskripsi.style.backgroundColor = "yellow";

Hasil:
Paragraf akan tampil dengan teks biru, ukuran 20px, dan latar kuning. Gunakan gaya camelCase (backgroundColor, bukan background-color) saat menulis properti CSS di JavaScript.

5. Contoh Studi Kasus: Ganti Warna dan Pesan

<h1 id="judul">Selamat Datang!</h1>
<button id="tombol">Ubah Teks & Warna</button>

<script>
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
  let judul = document.getElementById("judul");
  judul.innerText = "Halo, Dunia JavaScript!";
  judul.style.color = "red";
});
</script>

Ketika tombol diklik:

Teks <h1> berubah menjadi “Halo, Dunia JavaScript!”
Warnanya berubah menjadi merah

Kesimpulan

DOM adalah jantung interaksi JavaScript dengan halaman web. Dengan memahami DOM dan selector seperti getElementById() dan querySelector(), kamu dapat:

Mengakses elemen HTML secara dinamis
Mengubah teks, atribut, dan gaya CSS
Membuat halaman yang interaktif dan menarik

Langkah berikutnya, kamu bisa mempelajari Event Handling — cara JavaScript merespons aksi pengguna seperti klik, ketik, atau geser.