0Pricing
JavaScript Academy · Pelajaran

Memilih Elemen dengan querySelector

Temukan elemen menggunakan pemilih CSS.

Memilih Elemen dengan querySelector adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengenal querySelector

querySelector mengembalikan elemen pertama yang cocok dengan pemilih CSS, atau null jika tidak ada yang cocok. Metode ini tersedia pada document dan setiap elemen.

const title = document.querySelector("h1");
console.log(title.textContent);

Semua Pemilih CSS Dapat Digunakan

Kekuatan querySelector adalah kemampuannya menerima pemilih yang sama seperti yang Anda gunakan dalam CSS: tag, kelas, id, atribut, dan kombinasinya.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll mengembalikan semua elemen yang cocok sebagai NodeList statis. Bahkan jika tidak ada yang cocok, metode ini mengembalikan daftar kosong (tidak pernah null).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Mengulang Hasil

NodeList dari querySelectorAll mendukung forEach secara langsung, sehingga proses pengulangan menjadi rapi.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Pemilih Elemen Turunan

Anda dapat menargetkan elemen bertingkat dengan spasi (turunan), sama seperti dalam CSS. Cara ini menemukan setiap .price di dalam .product.

const prices = document.querySelectorAll(".product .price");

Menggabungkan Kelas

Menggabungkan kelas tanpa spasi berarti sebuah elemen harus memiliki semuanya. Di sini kita mencocokkan tombol yang bersifat utama sekaligus besar.

const btn = document.querySelector("button.primary.large");

Pencarian Terbatas

Memanggil querySelector pada sebuah elemen (bukan document) hanya mencari di dalam elemen tersebut. Dengan begitu, pencarian tetap lokal dan cepat.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Kelas Semu

Kelas semu struktural seperti :first-child dan :nth-of-type juga dapat digunakan.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Menangani Hasil yang Tidak Cocok

Karena querySelector dapat mengembalikan null, lakukan pemeriksaan sebelum menggunakan hasilnya agar tidak terjadi TypeError.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Pemilih Atribut

Pemilih atribut memungkinkan Anda mencocokkan atribut data, yang sangat berguna untuk menghubungkan elemen tanpa bergantung pada kelas.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector dibandingkan Antarmuka Lama

querySelector lebih fleksibel daripada getElementById karena menerima pemilih apa pun, tetapi pencarian berdasarkan id masih sedikit lebih cepat. Gunakan alat yang tepat untuk setiap kebutuhan.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemilih.

Rangkuman

Anda telah mempelajari bahwa querySelector mengembalikan kecocokan pertama (atau null), sedangkan querySelectorAll mengembalikan NodeList statis yang berisi semua kecocokan. Keduanya menerima pemilih CSS lengkap dan dapat dibatasi pada elemen induk. Selalu periksa nilai kosong saat menggunakan querySelector.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memilih Elemen dengan querySelector” gratis?

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

Apa yang akan aku pelajari di “Memilih Elemen dengan querySelector”?

Temukan elemen menggunakan pemilih CSS. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 “Memilih Elemen dengan querySelector” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

  1. Memilih Elemen dengan querySelector
  2. getElementById dan getElementsByClassName
  3. Menelusuri Induk, Anak, dan Saudara
  4. NodeList vs HTMLCollection
← Kembali ke JavaScript Academy