Mengubah isi halaman (DOM)

Sampai sekarang hasil kode kita cuma muncul di console. Pengunjung tidak melihatnya. Pelajaran ini titik baliknya: JavaScript akan mengubah apa yang tampil di halaman.

Dua langkah: cari, lalu ubah

Setiap tag di halaman, yang sudah kamu kenal sebagai elemenElemenSatu bagian halaman web yang lengkap, misalnya sebuah judul atau sebuah tombol.Penjelasan lengkap →, bisa disentuh JavaScript. Caranya selalu dua langkah:

1. Cari elemennya, lalu simpan di variabel.
2. Ubah isi atau tampilannya lewat variabel itu.

Untuk mencari, kita memakai idID (nama elemen)Nama unik untuk satu elemen, supaya mudah ditunjuk oleh CSS atau JavaScript.Penjelasan lengkap → yang sudah kamu kenal dari Kelas HTML:

<h1 id="judul">Halo</h1>

<script>
  const judul = document.getElementById('judul');
  judul.textContent = 'Halo, Rani!';
</script>

document adalah seluruh halaman. getElementById('judul') berarti “carikan elemen yang id-nya judul”. Hasilnya disimpan di variabel judul, lalu textContent (isi tulisan) diganti.

Hal-hal yang bisa diubah

Untuk style, nama properti CSS yang bertanda hubung ditulis dengan huruf besar di tengah: background-color menjadi style.backgroundColor, font-size menjadi style.fontSize. Nilainya berupa teks lengkap dengan satuannya: '24px'.

Cara yang lebih rapi: ganti class

Mengatur banyak gaya lewat style dari JavaScript cepat berantakan. Cara yang lebih rapi: tulis gayanya di CSS sebagai classClassNama kelompok yang bisa ditempelkan ke banyak elemen, supaya semuanya didandani sama oleh CSS.Penjelasan lengkap →, lalu JavaScript hanya memasang atau mencopot class itu.

.sorot {
  background: #fff3bf;
  font-weight: bold;
}

const paragraf = document.getElementById('kabar');
paragraf.classList.add('sorot');      // pasang
paragraf.classList.remove('sorot');   // copot
paragraf.classList.toggle('sorot');   // pasang kalau belum ada, copot kalau sudah

Pembagian tugas yang bagus: CSS yang mengurus seperti apa tampilannya, JavaScript yang memutuskan kapan tampilannya dipakai.

Coba sendiri

Halaman kecil dengan satu judul dan satu paragraf. Awalnya belum ada kode yang mengubah apa pun.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Mengubah halaman</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 16px;
    }
    .sorot {
      background: #fff3bf;
      font-weight: bold;
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1 id="judul">Halo, dunia</h1>
  <p id="kabar">Ini paragraf yang akan kita ubah.</p>

  <script>
    // Tantangan 1: ambil elemen judul, lalu ganti textContent-nya jadi namamu
    // Tantangan 2: ambil elemen kabar, lalu pasang class "sorot" dengan classList.add
    // Tantangan 3: ubah warna tulisan judul jadi biru lewat style.color
  </script>
</body>
</html>

Tantangannya:

1. Ambil elemen judul dengan getElementById, lalu ganti textContent-nya jadi namamu.
2. Ambil elemen kabar, lalu pasang class sorot dengan classList.add.
3. Ubah warna tulisan judul jadi biru lewat style.color.