Jago JavaScript 2 #3: Mengubah Isi & Atribut (Bikin Website Hidup!)

Sekarang kita bakal belajar dua hal paling seru di DOM: ngerubah apa yang tertulis (Isi/Konten) dan ngerubah gimana elemen itu bekerja (Atribut).

🧩 Apa yang Akan Dipelajari

• Perbedaan telak antara innerText, textContent, dan innerHTML.
• Cara ganti teks di dalam tombol atau judul.
• Cara ganti atribut seperti src pada gambar atau href pada link (setAttribute, getAttribute).
• Mengubah inline style CSS langsung dari JavaScript.

⚙️ Persiapan

Pake file index.html yang kemarin, atau bikin baru yang simpel aja:

<h1 id="judul">Hello World</h1>
<p class="deskripsi">Ini teks asli.</p>
<img id="gambar-profil" src="profil-lama.jpg" alt="Foto Profil">
<a id="link-web" href="#">Kunjungi Web</a>
<button id="btn-ubah">Ubah Konten</button>

🚀 Langkah-Langkah

1. Mengubah Teks (innerText vs textContent)

Buat ganti teks biasa, kita punya dua opsi. Bedanya tipis banget:

• innerText: Cuma ambil teks yang kelihatan sama user (kalau ada CSS display: none, teksnya gak keambil).
• textContent: Ambil semua teks apa adanya, termasuk spasi kosong dan teks yang disembunyiin CSS.

const judul = document.getElementById('judul');
judul.innerText = "Selamat Datang, Kay!"; // Langsung berubah di layar!

const deskripsi = document.querySelector('.deskripsi');
console.log(deskripsi.textContent); // Nampilin teks asli
deskripsi.textContent = "Teks ini sudah diubah lewat JavaScript.";

2. Mengubah HTML (innerHTML)

Kalau kamu mau masukin tag HTML baru ke dalam sebuah elemen (misal: bikin teks jadi tebal atau nambahin tombol baru).

const deskripsi = document.querySelector('.deskripsi');
// Hati-hati: Cara ini bakal ngehapus semua isi aslinya!
deskripsi.innerHTML = "Ini teks <strong>Tebal</strong> dan ada <button>Tombol Baru</button>.";

3. Mengubah Atribut (setAttribute & getAttribute)

Atribut itu seperti src di <img> atau href di <a>. Kita bisa ganti ini secara dinamis.

const gambar = document.getElementById('gambar-profil');
const link = document.getElementById('link-web');

// Ganti gambar (misal saat user ganti foto profil)
gambar.setAttribute('src', 'profil-baru.png');
gambar.setAttribute('alt', 'Foto Profil Baru Kay');

// Ganti alamat link
link.setAttribute('href', 'https://www.google.com');
link.innerText = "Buka Google";

4. Mengubah Gaya CSS (style)

Kamu bisa ubah inline style langsung. Nama properti CSS yang pakai strip (-) berubah jadi camelCase di JavaScript.

const judul = document.getElementById('judul');
judul.style.color = 'red';
judul.style.fontSize = '40px';
judul.style.backgroundColor = 'yellow'; // 'background-color' jadi 'backgroundColor'

--- policymakers.

💡 Tips Tambahan

• Keamanan innerHTML: Jangan pernah pakai innerHTML buat masukin data yang diketik sama user (input form). Ini bisa bikin website kamu kena serangan Cross-Site Scripting (XSS). Gunakan innerText atau textContent kalau cuma mau nampilin teks biasa.
• Properti Langsung: Selain setAttribute, kamu juga bisa akses atribut populer langsung. Misal: gambar.src = 'baru.png'; atau link.href = 'https://...';. Ini lebih singkat dan sering dipakai.

❗ Troubleshooting

Masalah: Kenapa gambar saya gak berubah padahal kodenya sudah benar? Solusi: Cek alamat gambarnya (src). Pastikan file gambar barunya benar-benar ada di folder yang sama atau alamat URL-nya valid. Cek juga konsol browser, kalau ada error 404 berarti alamat gambarnya salah.

🎯 Kesimpulan

Woke! Sekarang website kamu sudah gak kaku lagi. Kamu sudah bisa ganti judul, ngerubah paragraf, ganti foto profil, sampai ngasih warna lewat JavaScript. Kombinasikan ini dengan selector kemarin, dan kamu siap bikin konten dinamis apa aja!