Waktu browser membaca HTML, dia membangun versi halaman yang bisa disentuh JavaScript. Versi ini namanya DOM (Document Object Model): tiap tag jadi sebuah object yang bisa kamu ambil, ubah, tambah, atau hapus. Begitu DOM berubah, tampilan halaman ikut berubah.
🧪 Tebakan cepat:
document.querySelector("h3")di halaman yang gak punya<h3>hasilnya apa? Tebak dulu, jawabannya ada di bagian "Ambil elemen, lalu ubah".
Ambil elemen, lalu ubah
Halamannya punya satu heading:
<h1>Judul Lama</h1>
JavaScript ini mengubahnya:
const judul = document.querySelector("h1");
judul.textContent = "Judul Baru";
judul.style.color = "blue";
documentadalah seluruh halaman.document.querySelector("h1")mencari elemen pertama yang cocok dengan selector"h1". Selector-nya sama kayak di CSS:"#container"buat id,".kartu"buat class. Elemen yang ketemu disimpan di variabeljudul.judul.textContent = "Judul Baru";mengganti teks di dalam elemen itu.judul.style.color = "blue";mengubah warna teksnya, sama kayakcolor: bluedi CSS. Nilainya ditulis sebagai teks, di dalam tanda kutip.
Hasilnya, heading di halaman sekarang bertuliskan Judul Baru, warnanya biru.
Kalau gak ada elemen yang cocok, querySelector mengembalikan null (kosong). Jadi jawaban tebakan: null. Kalau kamu lanjut menulis null.textContent = ..., muncul TypeError "Cannot set properties of null". Cek lagi selector-nya.
Nama properti harus persis
- Properti CSS yang pakai tanda minus ditulis camelCase di JavaScript:
background-colorjadistyle.backgroundColor,font-sizejadistyle.fontSize. textContentditulis dengan C besar.textcontentgak dikenali, jadi teksnya gak berubah.- Properti event seperti
onclickditulis huruf kecil semua:
const tombol = document.querySelector("#btn");
tombol.onclick = () => {
tombol.textContent = "Sudah diklik";
};
Klik tombolnya, teksnya berubah. Kalau ditulis onClick (C besar), browser gak mengenalinya, jadi klik-nya gak memanggil apa-apa.
Tambah elemen baru
<div id="kotak"></div>
const p = document.createElement("p");
p.textContent = "Halo dari JavaScript";
document.querySelector("#kotak").appendChild(p);
document.createElement("p")membuat elemen<p>baru. Elemen ini belum kelihatan, karena belum ada di halaman.p.textContent = ...mengisi teksnya..appendChild(p)memasukkanpke dalam#kotak, di urutan paling akhir. Baru sekarang paragrafnya muncul.
Hasilnya: <div id="kotak"><p>Halo dari JavaScript</p></div>. Buat menghapus elemen, panggil p.remove().
textContent atau innerHTML
judul.textContent = "<b>Halo</b>"; // tampil persis: <b>Halo</b>
judul.innerHTML = "<b>Halo</b>"; // tampil: Halo, dicetak tebal
textContent memasang teks apa adanya, jadi tag HTML di dalamnya tampil sebagai tulisan biasa. innerHTML menjalankan HTML-nya. Buat teks biasa, apalagi yang diketik pengguna, pakai textContent, karena innerHTML bisa ikut menjalankan kode jahat yang diselipkan (namanya XSS).
⚠️ Jebakan yang sering ketemu
- Script jalan sebelum elemennya ada.
<script>di<head>jalan sebelum<body>dibaca, jadiquerySelectordapatnull. Taruh<script>di akhir<body>, atau pakai<script defer>. querySelectorcuma mengambil satu. Dia berhenti di elemen pertama yang cocok. Buat semua elemen yang cocok, pakaiquerySelectorAll.- Elemen dibuat tapi lupa dimasukkan. Tanpa
appendChild, elemen hasilcreateElementgak pernah muncul di halaman.
TL;DR: document.querySelector("selector") mengambil elemen pertama yang cocok, atau null kalau gak ada. el.textContent = "..." mengganti teks, el.style.color = "blue" mengganti gaya, dengan nama properti camelCase. Elemen baru dibuat dengan document.createElement("p"), diisi, lalu dimasukkan dengan induk.appendChild(p). Nama properti harus persis, misalnya onclick huruf kecil semua. Pakai textContent buat teks biasa, innerHTML cuma kalau memang mau menjalankan HTML.
