Belajar JavaScript - DOM API dan Manipulasi Elemen

#Pendahuluan

Sampai episode 12, semua kode kalian berjalan di Node.js — dunia server yang tidak mengenal halaman web. Fase tiga mengubah segalanya: JavaScript kalian masuk ke browser dan berinteraksi dengan halaman. Pintunya adalah DOM (Document Object Model) — representasi struktur HTML sebagai objek yang bisa dibaca dan dimodifikasi lewat JavaScript.

Episode 13 membahas empat operasi DOM paling dasar: memilih elemen, mengubah kontennya, membuat elemen baru, dan mengelola class serta atribut. Tidak ada frontend framework yang kalian pakai — langsung DOM API murni, supaya mekanismenya terlihat jelas sebelum kalian bertemu React atau Vue. Jalankan semua contoh lewat file HTML yang dibuka di browser, atau langsung di Console DevTools.

#Memilih Elemen dengan Selector

#document.querySelector

document.querySelector memilih satu elemen pertama yang cocok dengan selector CSS:

Memilih elemen dengan querySelector

const judul = document.querySelector("#judul");
const tombol = document.querySelector(".btn-utama");
const pertama = document.querySelector("li");

document.querySelector("#judul") memilih elemen dengan id judul, .btn-utama memilih class pertama, dan li memilih elemen li pertama. querySelector menerima selector CSS apa pun — id, class, tag, bahkan kombinasi. Jika tidak ada yang cocok, hasilnya null.

#document.querySelectorAll dan getElementById

Untuk memilih banyak elemen, gunakan querySelectorAll yang mengembalikan NodeList mirip array:

Memilih banyak elemen

const item = document.querySelectorAll(".menu li");
const kotak = document.getElementById("hero");
 
console.log(item.length);
console.log(kotak);

document.querySelectorAll(".menu li") mengembalikan semua li di dalam elemen class menu. getElementById adalah cara klasik yang cepat untuk memilih berdasarkan id. Untuk mengulang hasil querySelectorAll, pakai for...of atau forEach — pola yang sudah kalian kuasai di episode 3 dan 9.

#Membaca dan Mengubah Konten

#textContent dan innerHTML

textContent mengubah teks mentah elemen tanpa memproses markup, sedangkan innerHTML memproses string sebagai HTML:

Mengubah konten elemen

const judul = document.querySelector("#judul");
 
judul.textContent = "Halo dari JavaScript!";
console.log(judul.textContent);
 
const daftar = document.querySelector("#daftar");
daftar.innerHTML = "<li>Beras</li><li>Minyak</li>";

judul.textContent = "Halo dari JavaScript!" mengganti teks yang tampil. daftar.innerHTML = "<li>Beras</li>" menyisipkan HTML mentah. Perbedaan ini penting untuk keamanan: textContent selalu aman, sedangkan innerHTML berbahaya jika diisi data dari pengguna — lebih lanjut di episode 22.

#Membuat dan Menambah Elemen Baru

#createElement dan append

document.createElement membuat elemen di memori, lalu append atau appendChild menaruhnya ke dalam dokumen:

Membuat dan menambah elemen

const daftar = document.querySelector("#daftar");
 
const itemBaru = document.createElement("li");
itemBaru.textContent = "Telur";
 
daftar.append(itemBaru);
console.log(daftar.children.length);

document.createElement("li") membuat elemen baru yang belum tampil. Setelah diisi textContent, daftar.append(itemBaru) menaruhnya sebagai anak terakhir dari daftar. append bisa menerima banyak argumen sekaligus dan juga menerima string — appendChild hanya satu node.

#Membangun Struktur Multi-Level

Elemen bisa dibangun bertahap lalu dipasang sekaligus:

Membangun kartu dinamis

const kontainer = document.querySelector("#kontainer");
 
const kartu = document.createElement("article");
kartu.classList.add("kartu");
 
const judulKartu = document.createElement("h3");
judulKartu.textContent = "Judul Kartu";
 
const isi = document.createElement("p");
isi.textContent = "Isi kartu dibuat dari JavaScript.";
 
kartu.append(judulKartu, isi);
kontainer.append(kartu);

kartu.append(judulKartu, isi) menambahkan dua anak sekaligus, dan kontainer.append(kartu) memasang seluruh struktur dalam satu langkah. Pola ini adalah cara standar membangun antarmuka dinamis — setiap komponen dibangun di memori, lalu dipasang ke dokumen.

#Mengelola Class dan Atribut

#classList: Tambah, Hapus, dan Toggle

classList memberi API yang nyaman untuk mengelola class elemen:

Mengelola class dengan classList

const tombol = document.querySelector("#tombol");
 
tombol.classList.add("aktif");
tombol.classList.remove("lama");
tombol.classList.toggle("disembunyikan");
console.log(tombol.classList.contains("aktif"));

tombol.classList.add("aktif") menambah class, remove menghapus, toggle menambah jika belum ada dan menghapus jika sudah ada, dan contains mengecek keberadaan class. toggle adalah pola paling sering dipakai untuk state seperti menu terbuka dan tertutup.

#Mengelola Atribut dan Style

Atribut lain diakses lewat setAttribute, getAttribute, dan removeAttribute, sedangkan style inline diubah lewat properti style:

Mengubah atribut dan style

const gambar = document.querySelector("#profil");
const kotak = document.querySelector("#kotak");
 
gambar.setAttribute("src", "/images/baru.png");
gambar.setAttribute("alt", "Foto profil terbaru");
 
kotak.style.backgroundColor = "tomato";
kotak.style.padding = "16px";

gambar.setAttribute("src", "/images/baru.png") mengganti atribut, dan kotak.style.backgroundColor = "tomato" mengubah style inline. Nama properti CSS ditulis dengan camelCase: background-color menjadi backgroundColor. Untuk style yang lebih kompleks, lebih baik memakai class dengan classList daripada menumpuk style inline.

#Menerapkan pada Halaman Nyata

#Kerangka HTML dan Alur Eksekusi

Semua kode di atas butuh halaman untuk dijalankan. Struktur minimalnya:

index.html dengan script

<!DOCTYPE html>
<html>
  <body>
    <div id="daftar"></div>
    <script src="main.js"></script>
  </body>
</html>

<script src="main.js"></script> memuat JavaScript setelah elemen div terbaca. Urutan ini penting: script yang diletakkan di akhir body menjamin elemen target sudah ada di DOM saat JavaScript dijalankan. Alternatif modernnya adalah atribut defer pada script di bagian head.

#Menjalankan Server Lokal

Untuk menguji halaman dengan aman, jalankan server lokal — bukan membuka file langsung:

npx serve .

npx serve . melayani direktori project pada alamat http://localhost:3000. Memakai server lokal membuat fetch dan modul bekerja normal — dua topik yang akan kita bahas di episode 10 dan 15.

#Penutup

Episode 13 membuka pintu ke dunia web interaktif: memilih elemen dengan querySelector, mengubah konten dengan textContent dan innerHTML, membangun elemen baru dengan createElement dan append, serta mengelola class, atribut, dan style lewat DOM API.

Inti yang harus dibawa pulang:

• querySelector memilih satu elemen; querySelectorAll memilih banyak.
• textContent aman untuk teks; innerHTML berbahaya untuk input pengguna.
• createElement lalu append membangun elemen dinamis secara bertahap.
• classList menyediakan add, remove, toggle, dan contains.
• Nama properti style ditulis dengan camelCase.
• Letakkan script di akhir body atau gunakan defer.

Di episode 14 selanjutnya kita akan membahas event handling dan delegasi event — merespons klik, input, dan keyboard dengan addEventListener, memahami perambatan event, serta pola delegasi yang efisien untuk elemen dinamis. Inilah cara halaman merespons pengguna secara nyata.