← JavaScript26 / 69

querySelector

document.querySelector mencari elemen memakai selector CSS — jadi pengetahuan CSS-mu langsung terpakai. Ia mengembalikan elemen pertama yang cocok, atau null kalau tidak ada. Menyentuh properti dari null inilah penyebab error paling sering: Cannot read properties of null.

👀 Contoh dulu

// selector CSS yang sama seperti di stylesheet
const kotak = document.querySelector('.teks');    // class
const semua = document.querySelectorAll('p');     // SEMUA yang cocok

console.log(kotak.textContent);
console.log(semua.length);

Hasilnya: Paragraf 1

💡 querySelector → satu elemen pertama. querySelectorAll → daftar semua. Kalau tidak ketemu, querySelector memberi null.

📝 Sekarang giliranmu

Ambil elemen <h1 id="judul"> dengan querySelector('#judul'), simpan di const judul, lalu tampilkan judul.textContent.

Preview
← SebelumnyaBerikutnya →