Frontend Academy · Pelajaran

querySelector dan querySelectorAll

Temukan satu atau beberapa elemen menggunakan string pemilih CSS dan pahami perbedaan antara NodeList dan HTMLCollection.

querySelector dan querySelectorAll adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu DOM?

Document Object Model adalah pohon objek JavaScript yang merepresentasikan struktur HTML. JavaScript berinteraksi dengan DOM untuk membaca, mengubah, menambahkan, dan menghapus elemen — sehingga halaman web menjadi dinamis.

getElementById

Selector klasik. document.getElementById('myId') mengembalikan elemen dengan id tersebut, atau null jika tidak ditemukan. Cara ini cepat, tetapi hanya berfungsi dengan ID.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — Satu Elemen

document.querySelector(cssSelector) mengembalikan elemen pertama yang cocok dengan selector CSS apa pun. Mengembalikan null jika tidak ada yang cocok. Cara ini lebih fleksibel daripada getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — Beberapa Elemen

document.querySelectorAll(cssSelector) mengembalikan NodeList statis yang berisi semua elemen yang cocok. Ini bukan array live — Anda harus melakukan iterasi terhadapnya. Gunakan Array.from() atau sintaks spread untuk menggunakan metode array.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Query Terlingkup

Anda dapat memanggil querySelector pada elemen apa pun untuk mencari hanya di dalam subtree tersebut — bukan di seluruh dokumen. Cara ini lebih efisien dan mencegah pemilihan elemen dari bagian halaman lain secara tidak sengaja.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList vs HTMLCollection

NodeList (dari querySelectorAll) bersifat statis — mencerminkan DOM saat query dijalankan. HTMLCollection (dari getElementsByClassName dan lainnya) bersifat live — diperbarui secara otomatis saat DOM berubah. Keduanya menyerupai array, tetapi bukan array.

Menelusuri DOM

Dari elemen mana pun, Anda dapat berpindah melalui: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Memeriksa Keberadaan Elemen

Selalu periksa bahwa querySelector tidak mengembalikan null sebelum menggunakan hasilnya, terutama untuk elemen yang mungkin tidak ada di setiap halaman.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() dan closest()

element.matches(selector) mengembalikan true jika elemen cocok dengan selector. element.closest(selector) menelusuri ke atas pohon DOM dan mengembalikan ancestor pertama yang cocok dengan selector, atau null.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) mengembalikan true jika child berada di dalam parent (atau child tersebut adalah parent itu sendiri). Ini berguna untuk memeriksa apakah klik terjadi di luar modal atau dropdown.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Performa: Minimalkan Query DOM

Query DOM tidak gratis. Simpan hasilnya di dalam variable, bukan memanggil querySelector berulang kali. Dalam perulangan, kelompokkan pembacaan DOM dan penulisan DOM secara terpisah untuk menghindari layout thrashing.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Pemeriksaan Cepat

Method mana yang mengembalikan NodeList statis berisi semua elemen yang cocok?

Ringkasan: Memilih Elemen DOM

querySelector mengembalikan kecocokan pertama. querySelectorAll mengembalikan semua kecocokan sebagai NodeList statis. Batasi query pada subtree agar lebih efisien. Simpan hasil query. Gunakan closest() untuk delegasi peristiwa. Selalu periksa null sebelum menggunakan elemen hasil query.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “querySelector dan querySelectorAll” gratis?

Ya — teks lengkap “querySelector dan querySelectorAll” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “querySelector dan querySelectorAll”?

Temukan satu atau beberapa elemen menggunakan string pemilih CSS dan pahami perbedaan antara NodeList dan HTMLCollection. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “querySelector dan querySelectorAll” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

querySelector dan querySelectorAll
addEventListener dan Objek Peristiwa
Mengubah Konten: textContent, innerHTML, classList
Membuat dan Menambahkan Elemen

← Kembali ke Frontend Academy