Frontend Academy · Pelajaran

Mengubah Konten: textContent, innerHTML, classList

Baca dan perbarui konten teks elemen, sisipkan HTML, serta aktifkan, tambahkan, dan hapus kelas CSS secara terprogram.

Mengubah Konten: textContent, innerHTML, classList adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Membaca dan Menulis textContent

element.textContent mendapatkan atau menetapkan isi teks biasa suatu elemen, termasuk semua turunannya. Ini aman — HTML tidak pernah diuraikan, sehingga menetapkannya dengan input pengguna tidak menimbulkan kerentanan XSS.

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — Gunakan dengan Hati-Hati

element.innerHTML mendapatkan atau menetapkan markup HTML di dalam suatu elemen. Praktis, tetapi berbahaya jika digunakan dengan input pengguna — HTML akan diuraikan dan dapat menjalankan skrip (XSS). Jangan pernah menetapkan innerHTML dengan data pengguna yang belum disanitasi.

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText vs textContent

innerText hanya mengembalikan teks yang terlihat (menghormati CSS display:none) dan memicu layout. textContent mengembalikan semua teks, termasuk yang tersembunyi, dan lebih cepat. Pilih textContent kecuali Anda memang memerlukan perilaku teks-terlihat.

classList — Menambahkan dan Menghapus Class

element.classList menyediakan method untuk mengubah class CSS tanpa menyentuh seluruh string className. add(), remove(), toggle(), contains(), replace().

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle dengan Parameter Pemaksa

classList.toggle('class', condition) menambahkan class saat condition dianggap benar dan menghapusnya saat dianggap salah. Ini cara yang bersih untuk menyelaraskan class dengan state boolean.

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

Membaca dan Menetapkan Atribut

element.getAttribute('attr') membaca atribut apa pun. element.setAttribute('attr', value) menetapkannya. element.removeAttribute('attr') menghapusnya. element.hasAttribute('attr') memeriksa keberadaannya.

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

Atribut data-*

Atribut data-* khusus menyimpan data tambahan pada elemen tanpa memengaruhi DOM. Akses atribut tersebut melalui element.dataset dalam camelCase.

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

Properti Style

element.style.propertyName menetapkan style inline. Gunakan camelCase untuk properti yang menggunakan tanda hubung. Sebaiknya ubah class CSS daripada menetapkan style inline — class menjaga style tetap berada dalam file CSS, sesuai tempatnya.

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

Membaca Style Terhitung

getComputedStyle(element) mengembalikan style yang benar-benar diterapkan setelah cascade — bukan hanya style inline. Gunakan untuk membaca style yang ditetapkan oleh class CSS atau default browser.

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

Mengubah Tag title dan meta

Judul dokumen (tab browser) dapat diubah kapan saja dengan document.title = 'New Title'. Untuk SPA, ini memberikan pengalaman pengguna yang lebih baik saat berpindah antar tampilan.

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) menggulir halaman dengan mulus hingga elemen terlihat. Ini sempurna untuk navigasi gulir-ke-bagian dan menyoroti error validasi dalam formulir.

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

Pemeriksaan Cepat

Properti mana yang harus digunakan untuk menampilkan teks dari pengguna dengan aman di DOM tanpa risiko XSS?

Ringkasan: Mengubah DOM

textContent menetapkan teks biasa dengan aman. innerHTML menetapkan HTML (berbahaya jika digunakan dengan input pengguna). classList.add/remove/toggle menangani class CSS dengan rapi. setAttribute/dataset mengelola atribut HTML. Sebaiknya ubah class daripada menggunakan style inline. getComputedStyle membaca style akhir yang diterapkan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengubah Konten: textContent, innerHTML, classList” gratis?

Ya — teks lengkap “Mengubah Konten: textContent, innerHTML, classList” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengubah Konten: textContent, innerHTML, classList”?

Baca dan perbarui konten teks elemen, sisipkan HTML, serta aktifkan, tambahkan, dan hapus kelas CSS secara terprogram. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mengubah Konten: textContent, innerHTML, classList” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

querySelector dan querySelectorAll
addEventListener dan Objek Peristiwa
Mengubah Konten: textContent, innerHTML, classList
Membuat dan Menambahkan Elemen

← Kembali ke Frontend Academy