Saatnya beraksi! Pelajari cara JavaScript mengubah teks, HTML internal, nilai form, dan atribut elemen HTML yang sudah Anda pilih dari DOM.
16m bacaanKuis WajibMicro Badge Lesson
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:
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.
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.
// Mengambil elemenlet elemenSapaan = document.getElementById('sapaan');let elemenDeskripsi = document.getElementById('deskripsi');// Membaca teksconsole.log(elemenSapaan.textContent); // Output: Halo Dunia!console.log(elemenDeskripsi.textContent); // Output: Ini deskripsi awal. (termasuk teks dari span)// Mengubah tekselemenSapaan.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.
let divInfo = document.getElementById('kontainer-info');// Membaca HTML internalconsole.log(divInfo.innerHTML); // Output: <p>Info awal...</p>// Mengubah HTML internaldivInfo.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.
Ngeset nilai baru buat atribut. Kalau atributnya belum ada, dia bakal dibikin.
javascript
let linkSaya = document.querySelector('a'); // Ambil link pertamalinkSaya.setAttribute('href', 'https://www.javascript.com');linkSaya.setAttribute('target', '_blank');linkSaya.setAttribute(
Metode removeAttribute(namaAtribut):
Ngapus atribut dari elemen.
javascript
let inputContoh = document.getElementById('inputNama');inputContoh.removeAttribute('placeholder'); // Hapus placeholder-nya
Metode hasAttribute(namaAtribut):
Ngecek apakah elemen punya atribut tertentu. Ngembaliin true atau false.
javascript
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.
Checkpoint KuisTarget: 70%
Kuis Manipulasi Konten & Atribut DOM
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
