Memilih Elemen dengan querySelector
Cari elemen menggunakan pemilih CSS.
Memilih Elemen dengan querySelector ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Kenali querySelector
querySelector mengembalikan elemen pertama yang sepadan dengan pemilih CSS, atau nilai kosong jika tiada yang sepadan. Ia tersedia pada document dan pada setiap elemen.
const title = document.querySelector("h1");
console.log(title.textContent);Mana-mana Pemilih CSS Boleh Digunakan
Kekuatan querySelector ialah ia menerima pemilih yang sama seperti yang anda gunakan dalam CSS: tag, kelas, pengenal, atribut dan gabungan.
document.querySelector("#main"); // by id
document.querySelector(".card"); // by class
document.querySelector("input[type=email]"); // by attributequerySelectorAll
querySelectorAll mengembalikan semua elemen yang sepadan sebagai NodeList statik. Walaupun tiada padanan, ia mengembalikan senarai kosong (tidak pernah nilai kosong).
const cards = document.querySelectorAll(".card");
console.log(cards.length);Mengulangi Hasil
NodeList daripada querySelectorAll menyokong forEach secara langsung, jadi pengulangan menjadi lebih kemas.
const items = document.querySelectorAll("li");
items.forEach((li) => {
console.log(li.textContent);
});Pemilih Keturunan
Anda boleh menyasarkan elemen bersarang dengan ruang (keturunan), sama seperti dalam CSS. Ini mencari setiap .price di dalam .product.
const prices = document.querySelectorAll(".product .price");Menggabungkan Kelas
Menyambungkan kelas tanpa ruang bermaksud elemen itu mesti mempunyai semua kelas tersebut. Di sini, kami mencari butang yang merupakan butang utama dan besar.
const btn = document.querySelector("button.primary.large");Carian dalam Skop
Memanggil querySelector pada elemen (bukan document) hanya mencari di dalam elemen itu. Ini menjadikan carian setempat dan pantas.
const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");Pseudokelas
Pseudokelas struktur seperti :first-child dan :nth-of-type juga berfungsi.
document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");Mengendalikan Tiada Padanan
Oleh sebab querySelector boleh mengembalikan nilai kosong, semak dahulu sebelum menggunakan hasilnya bagi mengelakkan TypeError.
const banner = document.querySelector(".banner");
if (banner) {
banner.classList.add("hidden");
}Pemilih Atribut
Pemilih atribut membolehkan anda mencari berdasarkan atribut data, yang amat berguna untuk mengaitkan elemen tanpa bergantung pada kelas.
const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");querySelector berbanding API Lama
querySelector lebih fleksibel daripada getElementById kerana ia menerima mana-mana pemilih, tetapi carian pengenal masih sedikit lebih pantas. Gunakan alat yang sesuai untuk tugas tersebut.
document.querySelector("#nav"); // flexible
document.getElementById("nav"); // fastest for idsSemakan Ringkas
Uji pemahaman anda tentang pemilih.
Ringkasan
Anda telah mempelajari bahawa querySelector mengembalikan padanan pertama (atau nilai kosong), manakala querySelectorAll mengembalikan NodeList statik bagi semua padanan. Kedua-duanya menerima pemilih CSS penuh dan boleh dihadkan kepada elemen induk. Sentiasa semak nilai kosong apabila menggunakan querySelector.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Memilih Elemen dengan querySelector” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Memilih Elemen dengan querySelector”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Memilih Elemen dengan querySelector”?
Cari elemen menggunakan pemilih CSS. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Memilih Elemen dengan querySelector” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Memilih Elemen dengan querySelector
- getElementById dan getElementsByClassName
- Menelusuri Induk, Anak dan Adik-beradik
- NodeList berbanding HTMLCollection