KAL
Menu

Memanipulasi konten

textContent, keamanan innerHTML, serta pengaturan style dan class.

Daftar isi

Elemen yang sudah terpilih pada pohon DOM dapat diubah isinya maupun penampilannya lewat beberapa properti, dan topik ini membahas tiga yang paling sering dipakai. textContent mengganti teks sebuah elemen, innerHTML mengganti sekaligus menafsirkan markup, sedangkan style dan classList mengatur penampilannya. Cara memilih di antara ketiganya menentukan keamanan halaman, sebab satu di antaranya membuka celah serangan apabila diberi masukan pengguna tanpa saringan.

Mengganti teks dengan textContent#

Properti textContent menyimpan teks murni di dalam sebuah elemen. Membacanya mengembalikan gabungan seluruh teks milik elemen tersebut beserta turunannya, sedangkan menulisnya mengganti seluruh isi elemen dengan satu node teks baru. Tidak ada bagian dari string yang ditafsirkan sebagai HTML, sehingga karakter seperti < dan > selalu tampil apa adanya di layar.

js Contoh: membaca dan mengganti teks judul 
// tidak-dijalankan
const judul = document.querySelector("#judul");

judul.textContent = "Rekap nilai kelas 7B";
console.log(judul.textContent);

Karena isinya selalu diperlakukan sebagai teks, textContent adalah pilihan bawaan untuk setiap konten yang berasal dari luar program, misalnya masukan pengguna atau data dari server. Kebiasaan ini menyelamatkan halaman dari injeksi markup tanpa perlu alat tambahan. Satu batasannya, textContent tidak menghasilkan elemen baru. Pemformatan seperti teks tebal harus datang dari class atau elemen yang dibuat terpisah pada topik berikutnya.

innerHTML dan keamanannya#

Properti innerHTML membaca atau mengganti isi elemen dalam bentuk string markup. Saat ditulis, browser menafsirkan string tersebut seperti HTML sungguhan, tag yang dikenal menjadi elemen baru dan atributnya ikut dipasang. Kemampuan ini praktis untuk templat yang tetap, misalnya kartu berisi ikon dan teks tebal yang polanya tidak pernah berubah.

js Contoh: innerHTML menafsirkan tag, textContent tidak 
// tidak-dijalankan
const kotak = document.querySelector("#kotak");
const teks = "Suhu <b>36</b> derajat";

kotak.textContent = teks;  // tampil: Suhu <b>36</b> derajat
kotak.innerHTML = teks;    // tampil: Suhu 36 derajat, dengan angka 36 tebal

Masalahnya muncul ketika string yang diberikan memuat data dari pengguna. String itu bisa saja mengandung tag <script> atau atribut penangan event, dan browser akan menjalankannya sama seperti kode yang ditulis sendiri. Membaca innerHTML juga menampilkan markup saat itu, berguna saat debugging, tetapi isinya tidak boleh langsung dipasang kembali ke elemen lain. Celah semacam ini disebut XSS, singkatan dari cross-site scripting, dan dibahas tuntas pada topik penutup modul ini.

Mengatur penampilan lewat style dan classList#

Properti elemen.style mengubah gaya langsung pada satu elemen, dan penamaannya mengikuti pola camelCase, jadi background-color pada CSS menjadi elemen.style.backgroundColor di JavaScript. Cara ini tepat untuk penyesuaian sekali jalan yang nilainya dihitung saat program berjalan, misalnya lebar yang mengikuti hasil perhitungan. Untuk keadaan tampilan yang berulang seperti tema gelap atau item selesai, class jauh lebih rapi karena aturannya tinggal di berkas CSS.

js Contoh: style langsung dan classList pada elemen yang sama 
// tidak-dijalankan
const kartu = document.querySelector("#kartu");

kartu.style.borderColor = "green"; // penyesuaian tunggal, nilai dihitung saat berjalan
kartu.classList.add("gelap");      // keadaan tampilan lebih baik lewat class

Class dikelola oleh classList, yaitu koleksi class milik satu elemen yang menyediakan add(), remove(), dan toggle(). Metode toggle() menambahkan class bila belum ada dan melepasnya bila sudah ada, sehingga satu baris cukup untuk tombol tema. Kepemilikan sebuah class dapat diperiksa dengan contains(), berguna ketika pesan di layar perlu menyebut keadaan saat ini.

Properti lama className juga masih banyak dipakai, dan isinya berupa seluruh deretan class sebagai satu string. Mengisinya menimpa daftar class yang ada, sehingga penambahan yang aman tetap lewat classList.add(). Koleksi classList sendiri dapat ditelusuri seperti daftar biasa, berguna ketika keadaan elemen perlu diperiksa class demi class.

Demo berikut memadukan ketiganya pada satu kartu daftar belanja. Tombol Ganti tema memanggil classList.toggle() pada kartu, tombol Ganti judul mengganti textContent judul bolak-balik, dan tombol Tandai item pertama menambahkan class coretan pada item pertama lewat querySelector("li") yang dicari dari dalam kartu. Panel keterangan selalu menuliskan keadaan terbarunya dengan textContent.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Demo textContent dan classList</title>
  <style>
    body { font-family: "Segoe UI", Arial, sans-serif; margin: 14px; font-size: 14px; color: #1f2937; }
    .kartu { border: 1px solid #94a3b8; border-radius: 8px; padding: 12px 16px; max-width: 360px; background: #ffffff; }
    .kartu.gelap { background: #1e293b; color: #e2e8f0; border-color: #0f172a; }
    .kartu li.selesai { text-decoration: line-through; color: #64748b; }
    button { padding: 6px 12px; margin: 10px 8px 0 0; cursor: pointer; }
    #info { margin-top: 12px; padding: 10px; background: #eef2ff; border: 1px solid #4338ca; border-radius: 8px; min-height: 20px; max-width: 380px; }
  </style>
</head>
<body>
  <div id="kartu" class="kartu">
    <h2 id="judul">Daftar belanja</h2>
    <ul>
      <li>Beras 5 kg</li>
      <li>Minyak goreng</li>
      <li>Gula pasir</li>
    </ul>
  </div>
  <button id="tombol-tema" type="button">Ganti tema</button>
  <button id="tombol-judul" type="button">Ganti judul</button>
  <button id="tombol-selesai" type="button">Tandai item pertama</button>
  <div id="info">Keterangan perubahan akan tampil di sini.</div>
  <script src="index.js"></script>

<script>
// Demo manipulasi konten: mengganti teks dan mengatur class dengan classList.

const kartu = document.querySelector("#kartu");
const judul = document.querySelector("#judul");
const info = document.querySelector("#info");

document.querySelector("#tombol-tema").addEventListener("click", () => {
  kartu.classList.toggle("gelap");
  info.textContent = "Class gelap aktif: " + kartu.classList.contains("gelap");
});

document.querySelector("#tombol-judul").addEventListener("click", () => {
  if (judul.textContent === "Daftar belanja") {
    judul.textContent = "Daftar belanja minggu ini";
  } else {
    judul.textContent = "Daftar belanja";
  }
  info.textContent = "Judul sekarang: " + judul.textContent;
});

document.querySelector("#tombol-selesai").addEventListener("click", () => {
  const pertama = kartu.querySelector("li");
  pertama.classList.toggle("selesai");
  info.textContent = "Class selesai pada item pertama: " + pertama.classList.contains("selesai");
});

</script>
<script>
// Demo manipulasi konten: mengganti teks dan mengatur class dengan classList.

const kartu = document.querySelector("#kartu");
const judul = document.querySelector("#judul");
const info = document.querySelector("#info");

document.querySelector("#tombol-tema").addEventListener("click", () => {
  kartu.classList.toggle("gelap");
  info.textContent = "Class gelap aktif: " + kartu.classList.contains("gelap");
});

document.querySelector("#tombol-judul").addEventListener("click", () => {
  if (judul.textContent === "Daftar belanja") {
    judul.textContent = "Daftar belanja minggu ini";
  } else {
    judul.textContent = "Daftar belanja";
  }
  info.textContent = "Judul sekarang: " + judul.textContent;
});

document.querySelector("#tombol-selesai").addEventListener("click", () => {
  const pertama = kartu.querySelector("li");
  pertama.classList.toggle("selesai");
  info.textContent = "Class selesai pada item pertama: " + pertama.classList.contains("selesai");
});

</script></body>
</html>

Kesalahan umum#

  1. Mengganti isi pembungkus bersama seluruh anaknya. textContent yang ditulis pada elemen pembungkus menghapus semua anak di dalamnya, misalnya menulis pada <ul> menghilangkan seluruh li yang sudah ada. Ganti teks pada elemen terdalam yang memang menampung teks, atau bangun ulang anak pembungkus dengan cara pada topik berikutnya.
  2. Menulis properti style dengan tanda hubung. Baris elemen.style.background-color melempar error sintaks karena tanda hubung tidak sah sebagai nama properti JavaScript. Bentuk yang benar adalah elemen.style.backgroundColor, dan pola yang sama berlaku untuk lineHeight serta properti bergaris lainnya.
  3. Memindahkan innerHTML dari satu elemen ke elemen lain. Membaca innerHTML mengembalikan markup yang ada saat itu, dan memasangnya kembali di tempat lain ikut menyalin markup yang mungkin berasal dari pengguna. Jalur XSS pada konten tersebut pun ikut tersalin. Periksa asal konten lebih dahulu, atau pindahkan datanya saja dan render ulang dengan aman.

Ringkasan#

  • textContent mengganti isi elemen dengan teks murni tanpa menafsirkan markup, sehingga aman untuk konten dari pengguna.
  • innerHTML menafsirkan string sebagai HTML dan berguna untuk templat tetap, tetapi berbahaya apabila diberi masukan pengguna karena membuka jalur XSS.
  • Gaya sekali jalan ditulis lewat elemen.style dengan penamaan camelCase, sedangkan keadaan tampilan yang berulang dikelola lewat classList dengan add, remove, toggle, dan contains.
  • Pemisahan tugas ini menjaga markup hasil pengguna tetap menjadi teks dan penampilan tetap terpusat di CSS.

Referensi#