DOM Manipulation: Mengubah Halaman dengan JS

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Memahami apa itu DOM
Memilih elemen HTML dengan JavaScript
Mengubah teks, HTML, dan style elemen
Menambah dan menghapus elemen

Materi Singkat

Selama ini kita menulis JavaScript yang hanya berjalan di console — tidak terlihat pengguna. Sekarang saatnya JavaScript mengubah halaman web secara langsung!

DOM (Document Object Model) adalah representasi HTML sebagai objek JavaScript yang bisa dimanipulasi. Bayangkan DOM sebagai "peta" halaman web — setiap elemen HTML adalah node dalam peta ini, dan JavaScript bisa mengakses serta mengubah setiap node.

Memilih Elemen

// Pilih satu elemen berdasarkan selector CSS
const judul = document.querySelector("h1");
const tombol = document.querySelector("#tombol-kirim");
const intro = document.querySelector(".teks-intro");
 
// Pilih semua elemen yang cocok (mengembalikan NodeList)
const semuaParagraf = document.querySelectorAll("p");
const semuaKartu = document.querySelectorAll(".kartu");
 
// Cara lama (masih dipakai)
const elemen = document.getElementById("nama-id");

Membaca & Mengubah Konten

const judul = document.querySelector("h1");
 
// Baca teks
console.log(judul.textContent);  // hanya teks, tanpa tag
 
// Ubah teks
judul.textContent = "Judul Baru!";
 
// Baca/ubah HTML (hati-hati dengan ini — potensi XSS)
judul.innerHTML = "Judul dengan <em>format</em>";

Mengubah Style

const kotak = document.querySelector(".kotak");
 
// Ubah satu properti
kotak.style.backgroundColor = "#2563eb";
kotak.style.color = "white";
kotak.style.padding = "16px";
 
// Cara lebih baik: tambah/hapus class
kotak.classList.add("aktif");
kotak.classList.remove("tidak-aktif");
kotak.classList.toggle("tersembunyi");  // tambah jika tidak ada, hapus jika ada
kotak.classList.contains("aktif");      // true/false

Mengubah Atribut

const gambar = document.querySelector("img");
gambar.src = "gambar-baru.jpg";
gambar.alt = "Deskripsi baru";
 
const link = document.querySelector("a");
link.href = "https://example.com";

Membuat & Menambahkan Elemen Baru

// Buat elemen baru
const paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini paragraf yang dibuat dengan JavaScript!";
paragrafBaru.classList.add("baru");
 
// Tambahkan ke halaman
const container = document.querySelector(".container");
container.appendChild(paragrafBaru);    // di akhir
container.prepend(paragrafBaru);        // di awal

Menghapus Elemen

const elemen = document.querySelector(".hapus-ini");
elemen.remove();  // hapus dari halaman

Contoh Kode

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Manipulation</title>
    <style>
      body { font-family: sans-serif; padding: 24px; }
      .kartu {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
      }
      .sorot { background-color: #fef9c3; }
      .tersembunyi { display: none; }
    </style>
  </head>
  <body>
    <h1 id="judul">DOM Manipulation</h1>
    <p id="deskripsi">Teks ini akan diubah oleh JavaScript.</p>
 
    <div id="daftar-kartu">
      <div class="kartu">Kartu 1</div>
      <div class="kartu">Kartu 2</div>
    </div>
 
    <script>
      // Ubah teks
      const judul = document.querySelector("#judul");
      judul.textContent = "Selamat Datang di DOM!";
 
      // Ubah style langsung
      const deskripsi = document.querySelector("#deskripsi");
      deskripsi.style.color = "#2563eb";
      deskripsi.style.fontWeight = "bold";
      deskripsi.textContent = "JavaScript sudah mengubah paragraf ini!";
 
      // Tambah class
      const kartuPertama = document.querySelector(".kartu");
      kartuPertama.classList.add("sorot");
 
      // Buat dan tambahkan kartu baru
      const container = document.querySelector("#daftar-kartu");
      const kartuBaru = document.createElement("div");
      kartuBaru.classList.add("kartu");
      kartuBaru.textContent = "Kartu 3 — dibuat dengan JS!";
      kartuBaru.style.borderColor = "#2563eb";
      container.appendChild(kartuBaru);
 
      // Loop semua kartu dan tampilkan teksnya di console
      const semuaKartu = document.querySelectorAll(".kartu");
      semuaKartu.forEach((kartu, index) => {
        console.log(`Kartu ${index + 1}: ${kartu.textContent}`);
      });
    </script>
  </body>
</html>

Tugas Kecil

Buat file dom-latihan.html yang:

Punya <h1 id="judul">Teks Awal</h1> dan <p id="info">Info awal</p>
Punya <div id="daftar"></div> yang kosong
Di <script>, lakukan:
- Ubah teks #judul menjadi "Halaman Dinamis dengan JS"
- Ubah warna teks #judul menjadi biru (#2563eb)
- Ubah #info menjadi pesan yang menyebutkan berapa banyak item yang akan dibuat
- Buat array const makanan = ["Nasi Goreng", "Mie Ayam", "Soto", "Bakso", "Gado-gado"]
- Gunakan loop untuk membuat <div> baru untuk setiap makanan dan tambahkan ke #daftar
- Setiap <div> harus punya class "kartu", teks nama makanan, dan nomor urut

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Memahami apa itu DOM
Memilih elemen HTML dengan JavaScript
Mengubah teks, HTML, dan style elemen
Menambah dan menghapus elemen

Materi Singkat

Selama ini kita menulis JavaScript yang hanya berjalan di console — tidak terlihat pengguna. Sekarang saatnya JavaScript mengubah halaman web secara langsung!

Memilih Elemen

// Pilih satu elemen berdasarkan selector CSS
const judul = document.querySelector("h1");
const tombol = document.querySelector("#tombol-kirim");
const intro = document.querySelector(".teks-intro");
 
// Pilih semua elemen yang cocok (mengembalikan NodeList)
const semuaParagraf = document.querySelectorAll("p");
const semuaKartu = document.querySelectorAll(".kartu");
 
// Cara lama (masih dipakai)
const elemen = document.getElementById("nama-id");

Membaca & Mengubah Konten

const judul = document.querySelector("h1");
 
// Baca teks
console.log(judul.textContent);  // hanya teks, tanpa tag
 
// Ubah teks
judul.textContent = "Judul Baru!";
 
// Baca/ubah HTML (hati-hati dengan ini — potensi XSS)
judul.innerHTML = "Judul dengan <em>format</em>";

Mengubah Style

const kotak = document.querySelector(".kotak");
 
// Ubah satu properti
kotak.style.backgroundColor = "#2563eb";
kotak.style.color = "white";
kotak.style.padding = "16px";
 
// Cara lebih baik: tambah/hapus class
kotak.classList.add("aktif");
kotak.classList.remove("tidak-aktif");
kotak.classList.toggle("tersembunyi");  // tambah jika tidak ada, hapus jika ada
kotak.classList.contains("aktif");      // true/false

Mengubah Atribut

const gambar = document.querySelector("img");
gambar.src = "gambar-baru.jpg";
gambar.alt = "Deskripsi baru";
 
const link = document.querySelector("a");
link.href = "https://example.com";

Membuat & Menambahkan Elemen Baru

// Buat elemen baru
const paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini paragraf yang dibuat dengan JavaScript!";
paragrafBaru.classList.add("baru");
 
// Tambahkan ke halaman
const container = document.querySelector(".container");
container.appendChild(paragrafBaru);    // di akhir
container.prepend(paragrafBaru);        // di awal

Menghapus Elemen

const elemen = document.querySelector(".hapus-ini");
elemen.remove();  // hapus dari halaman

Contoh Kode

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Manipulation</title>
    <style>
      body { font-family: sans-serif; padding: 24px; }
      .kartu {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
      }
      .sorot { background-color: #fef9c3; }
      .tersembunyi { display: none; }
    </style>
  </head>
  <body>
    <h1 id="judul">DOM Manipulation</h1>
    <p id="deskripsi">Teks ini akan diubah oleh JavaScript.</p>
 
    <div id="daftar-kartu">
      <div class="kartu">Kartu 1</div>
      <div class="kartu">Kartu 2</div>
    </div>
 
    <script>
      // Ubah teks
      const judul = document.querySelector("#judul");
      judul.textContent = "Selamat Datang di DOM!";
 
      // Ubah style langsung
      const deskripsi = document.querySelector("#deskripsi");
      deskripsi.style.color = "#2563eb";
      deskripsi.style.fontWeight = "bold";
      deskripsi.textContent = "JavaScript sudah mengubah paragraf ini!";
 
      // Tambah class
      const kartuPertama = document.querySelector(".kartu");
      kartuPertama.classList.add("sorot");
 
      // Buat dan tambahkan kartu baru
      const container = document.querySelector("#daftar-kartu");
      const kartuBaru = document.createElement("div");
      kartuBaru.classList.add("kartu");
      kartuBaru.textContent = "Kartu 3 — dibuat dengan JS!";
      kartuBaru.style.borderColor = "#2563eb";
      container.appendChild(kartuBaru);
 
      // Loop semua kartu dan tampilkan teksnya di console
      const semuaKartu = document.querySelectorAll(".kartu");
      semuaKartu.forEach((kartu, index) => {
        console.log(`Kartu ${index + 1}: ${kartu.textContent}`);
      });
    </script>
  </body>
</html>

Tugas Kecil

Buat file dom-latihan.html yang:

Punya <h1 id="judul">Teks Awal</h1> dan <p id="info">Info awal</p>
Punya <div id="daftar"></div> yang kosong
Di <script>, lakukan:
- Ubah teks #judul menjadi "Halaman Dinamis dengan JS"
- Ubah warna teks #judul menjadi biru (#2563eb)
- Ubah #info menjadi pesan yang menyebutkan berapa banyak item yang akan dibuat
- Buat array const makanan = ["Nasi Goreng", "Mie Ayam", "Soto", "Bakso", "Gado-gado"]
- Gunakan loop untuk membuat <div> baru untuk setiap makanan dan tambahkan ke #daftar
- Setiap <div> harus punya class "kartu", teks nama makanan, dan nomor urut

8. DOM Manipulation: Mengubah Halaman dengan JS

Tujuan Belajar

Materi Singkat

Memilih Elemen

Membaca & Mengubah Konten

Mengubah Style

Mengubah Atribut

Membuat & Menambahkan Elemen Baru

Menghapus Elemen

Contoh Kode

Tugas Kecil

8. DOM Manipulation: Mengubah Halaman dengan JS

Tujuan Belajar

Materi Singkat

Memilih Elemen

Membaca & Mengubah Konten

Mengubah Style

Mengubah Atribut

Membuat & Menambahkan Elemen Baru

Menghapus Elemen

Contoh Kode

Tugas Kecil