JavaScript Jadi "Editor Konten": Ubah Teks, HTML, dan Atribut Elemen!

Udah bisa "nangkep" elemen HTML pake berbagai metode selector JavaScript? Mantap! Sekarang, setelah elemennya ada di tangan kita (disimpen di variabel), kita bisa mulai ngelakuin hal-hal keren: ngubah isinya, ngambil datanya, atau bahkan ngotak-atik atributnya!

Ini adalah inti dari manipulasi DOM (Document Object Model) yang bikin halaman web jadi dinamis.

Mengubah Konten Teks Elemen: textContent dan innerText

Kalau kamu mau ngubah teks yang ada di dalem sebuah elemen (misalnya, teks di paragraf <p>, judul <h1>, atau <span>), ada dua properti utama yang bisa dipake:

1. element.textContent:

   • Properti ini ngasih atau ngeset konten teks murni dari sebuah elemen dan semua anak-anaknya, tanpa tag HTML apa pun.
   • Kalau kamu ngeset textContent, semua konten HTML lama di dalem elemen itu bakal diganti sama teks baru yang kamu kasih.
   • Ini cara yang lebih aman dan seringkali lebih cepat performanya kalau kamu cuma mau berurusan sama teks biasa.

2. element.innerText:

   • Mirip textContent, tapi dia memperhatikan style CSS yang lagi diterapin dan cuma ngambil teks yang "keliatan" (visible) sama pengguna.
   • Misalnya, kalau ada <span> di dalem elemen yang di-set display: none; pake CSS, innerText gak bakal ngambil teks dari <span> itu, tapi textContent tetep bakal ngambil.
   • Performa innerText bisa sedikit lebih lambat karena dia perlu ngitung layout dan style.
   • Secara umum, textContent lebih sering jadi pilihan kecuali kamu bener-bener butuh perilaku innerText yang ngikutin render visual.

Contoh Penggunaan textContent:

HTML:

<h1 id="sapaan">Halo Dunia!</h1>
<p id="deskripsi">Ini <span>deskripsi</span> awal.</p>

JavaScript:

// Mengambil elemen
let elemenSapaan = document.getElementById('sapaan');
let elemenDeskripsi = document.getElementById('deskripsi');
 
// Membaca teks
console.log(elemenSapaan.textContent);    // Output: Halo Dunia!
console.log(elemenDeskripsi.textContent); // Output: Ini deskripsi awal. (termasuk teks dari span)
 
// Mengubah teks
elemenSapaan.textContent = "Selamat Datang di Website Saya!";
elemenDeskripsi.textContent = "Deskripsi ini sudah diubah oleh JavaScript."; 
// Sekarang, elemen <span> di dalem #deskripsi udah ilang, diganti teks baru ini.
 
console.log(elemenSapaan.textContent); // Output: Selamat Datang di Website Saya!

Mengubah Konten HTML Elemen: innerHTML (Hati-hati!)

Kalau kamu mau ngubah gak cuma teksnya aja, tapi juga struktur HTML di dalem sebuah elemen (misalnya, mau nambahin tag <strong> atau <ul><li>...</li></ul> baru), kamu bisa pake properti innerHTML.

• element.innerHTML:
  • Ngasih atau ngeset konten HTML (markup) di dalem sebuah elemen.
  • Kalau kamu ngeset innerHTML, browser bakal nge-parse string HTML yang kamu kasih dan ngebangun ulang DOM di dalem elemen itu.

Contoh Penggunaan innerHTML:

HTML:

<div id="kontainer-info">
    <p>Info awal...</p>
</div>

JavaScript:

let divInfo = document.getElementById('kontainer-info');
 
// Membaca HTML internal
console.log(divInfo.innerHTML); // Output: <p>Info awal...</p>
 
// Mengubah HTML internal
divInfo.innerHTML = "<h2>Judul Baru!</h2><p>Ini adalah <strong>konten HTML baru</strong> yang disisipkan.</p>";
/*
Sekarang, isi divInfo jadi:
<h2>Judul Baru!</h2>
<p>Ini adalah <strong>konten HTML baru</strong> yang disisipkan.</p>
*/

PERHATIAN BESAR soal Keamanan innerHTML!

• Kalau kamu nyisipin HTML ke halaman pake innerHTML dan HTML itu datangnya dari sumber yang gak kamu percaya (misalnya, input dari pengguna yang gak disanitasi), ini bisa bahaya banget! Orang jahat bisa nyisipin kode HTML atau JavaScript berbahaya (kayak <script>alert('Hacked!')</script>) yang bisa nyuri data atau ngerusak halamanmu. Ini disebut serangan Cross-Site Scripting (XSS).
• Kapan Aman Pake innerHTML? Kalau HTML yang kamu sisipin itu bener-bener kamu kontrol sendiri (misalnya, string HTML yang kamu tulis langsung di kodemu) atau udah pasti aman.
• Alternatif Lebih Aman (buat nambah elemen baru): Pake metode DOM kayak document.createElement(), element.appendChild(), element.textContent (kalau cuma teks). Ini lebih aman karena gak nge-parse string HTML mentah. (Nanti kita bahas lebih lanjut).

Mengakses dan Mengubah Nilai Input Form

Buat elemen-elemen input di form (kayak <input>, <textarea>, <select>), kita biasanya ngakses atau ngubah nilainya pake properti value.

Contoh Penggunaan value:

HTML:

<label for="nama">Nama:</label>
<input type="text" id="inputNama" value="Budi">
 
<label for="pesan">Pesan:</label>
<textarea id="inputPesan">Ini pesan awal.</textarea>
 
<label for="pilihan-kota">Kota:</label>
<select id="pilihanKota">
    <option value="jkt">Jakarta</option>
    <option value="bdg" selected>Bandung</option>
    <option value="sby">Surabaya</option>
</select>

JavaScript:

let inputNama = document.getElementById('inputNama');
let inputPesan = document.getElementById('inputPesan');
let pilihanKota = document.getElementById('pilihanKota');
 
// Membaca nilai
console.log(inputNama.value);   // Output: Budi
console.log(inputPesan.value);  // Output: Ini pesan awal.
console.log(pilihanKota.value); // Output: bdg (nilai dari option yang terpilih)
 
// Mengubah nilai
inputNama.value = "Siti Aminah";
inputPesan.value = "Pesan sudah diubah via JS!";
pilihanKota.value = "sby"; // Otomatis milih opsi Surabaya
 
console.log(inputNama.value); // Output: Siti Aminah

Buat checkbox, kamu bisa ngecek statusnya (tercentang atau enggak) pake properti checked (hasilnya boolean true/false).

// HTML: <input type="checkbox" id="setuju" checked>
let checkboxSetuju = document.getElementById('setuju');
console.log(checkboxSetuju.checked); // Output: true
checkboxSetuju.checked = false; // Sekarang gak tercentang

Mengakses dan Mengubah Atribut Elemen

Selain konten dan nilai, kita juga bisa ngoprek atribut-atribut elemen HTML (kayak id, class, src, href, disabled, dll.). Ada beberapa cara:

1. Akses Langsung sebagai Properti Objek Elemen:

   • Banyak atribut HTML standar (terutama yang namanya valid sebagai identifier JS) bisa diakses langsung sebagai properti dari objek elemen.
   • Contoh: gambar.src, link.href, tombol.disabled, elemen.id, elemen.className (buat atribut class).

   // HTML: <img id="logo" src="logo-lama.png" alt="Logo">
   let logo = document.getElementById('logo');
   console.log(logo.src); // Output: (URL lengkap ke logo-lama.png)
   console.log(logo.alt); // Output: Logo
    
   logo.src = "logo-baru.png"; // Ganti gambar
   logo.alt = "Logo Perusahaan Keren";
   logo.id = "logo-utama-website"; // Ganti ID

   • Untuk atribut boolean kayak disabled, checked, readonly, nilainya di JavaScript juga boolean (true/false).

     // HTML: <button id="tombolKirim">Kirim</button>
     let tombolKirim = document.getElementById('tombolKirim');
     tombolKirim.disabled = true; // Sekarang tombolnya gak bisa diklik

2. Metode getAttribute(namaAtribut):

   • Ngembaliin nilai atribut sebagai string. Kalau atributnya gak ada, ngembaliin null.
   • Berguna buat ngambil nilai atribut apa pun, termasuk atribut kustom (non-standar) atau yang namanya gak valid sebagai properti JS.

   // HTML: <div id="info-box" data-status="aktif" class="kotak biru">...</div>
   let infoBox = document.getElementById('info-box');
   console.log(infoBox.getAttribute('id'));         // Output: info-box
   console.log(infoBox.getAttribute('data-status'));// Output: aktif
   console.log(infoBox.getAttribute('class'));      // Output: kotak biru
   console.log(infoBox.getAttribute('style'));      // Output: null (karena gak ada atribut style)

3. Metode setAttribute(namaAtribut, nilaiBaru):

   • Ngeset nilai baru buat atribut. Kalau atributnya belum ada, dia bakal dibikin.

   let linkSaya = document.querySelector('a'); // Ambil link pertama
   linkSaya.setAttribute('href', 'https://www.javascript.com');
   linkSaya.setAttribute('target', '_blank');
   linkSaya.setAttribute('data-info', 'Link penting'); // Nambah atribut kustom

4. Metode removeAttribute(namaAtribut):

   • Ngapus atribut dari elemen.

   let inputContoh = document.getElementById('inputNama');
   inputContoh.removeAttribute('placeholder'); // Hapus placeholder-nya

5. Metode hasAttribute(namaAtribut):

   • Ngecek apakah elemen punya atribut tertentu. Ngembaliin true atau false.

   if (tombolKirim.hasAttribute('disabled')) {
       console.log("Tombol kirim saat ini dinonaktifkan.");
   }

Kapan Pake Akses Properti Langsung vs. getAttribute/setAttribute?

• Buat atribut standar yang umum (kayak id, src, href, value, className, disabled, checked), akses properti langsung biasanya lebih gampang dan sering dipake.
• Pake getAttribute dan setAttribute kalau:
  • Kamu mau kerja sama atribut kustom (terutama data-* atribut, meskipun buat data-* ada cara yang lebih enak pake element.dataset).
  • Nama atributnya gak valid sebagai identifier JavaScript (misal, mengandung tanda hubung).
  • Kamu butuh nilai atribut persis seperti yang tertulis di HTML (karena akses properti kadang ngasih nilai yang udah "diproses", misal img.src ngasih URL absolut).

Dengan kemampuan buat milih elemen dan sekarang ngubah konten serta atributnya, kamu udah punya "kekuatan super" buat bikin halaman web jadi bener-bener interaktif dan dinamis! Bayangin, kamu bisa bikin game sederhana, kalkulator, atau nampilin data yang berubah-ubah tanpa perlu nge-reload halaman.

Ini adalah dasar dari hampir semua interaksi yang kamu liat di website modern. Di materi berikutnya, kita bakal belajar cara ngubah tampilan (style CSS) elemen pake JavaScript dan ngelola class-nya.