Menguasai querySelector dan querySelectorAll dalam JavaScript

querySelector dan querySelectorAll dalam JavaScript

Kaedah querySelector dan querySelectorAll ialah alat yang berkuasa dalam JavaScript untuk memilih elemen dalam DOM. Mereka membenarkan pembangun menggunakan pemilih CSS untuk mengenal pasti dan memanipulasi elemen HTML.

---

1. querySelector

Kaedah querySelector memilih elemen first yang sepadan dengan pemilih CSS yang ditentukan.

Sintaks:

document.querySelector(selector);

• pemilih: Rentetan yang mewakili pemilih CSS (cth., "#id", ".class", "tag").

Contoh:

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

---

2. querySelectorAll

Kaedah querySelectorAll memilih semua elemen yang sepadan dengan pemilih CSS yang ditentukan dan mengembalikannya sebagai NodeList.

Sintaks:

document.querySelectorAll(selector);

• pemilih: Rentetan yang mewakili pemilih CSS.

Contoh:

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

Mengakses Elemen dalam NodeList:

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

---

3. Perbezaan Antara querySelector dan querySelectorAll

Ciri querySelector querySelectorAll

Feature	querySelector	querySelectorAll
Result	First matching element	All matching elements
Return Type	Single DOM element	NodeList (array-like structure)
Iteration	Not iterable	Iterable (e.g., using forEach)
Use Case	When one element is needed	When multiple elements are needed

Hasil Elemen padanan pertama Semua elemen padanan Jenis Pemulangan Elemen DOM tunggal NodeList (struktur seperti tatasusunan) Lelaran Tidak boleh diulang Iterable (cth., menggunakan forEach) Kes Penggunaan Apabila satu elemen diperlukan Apabila berbilang elemen diperlukan

---

4. Menggabungkan Pemilih

Anda boleh menggabungkan pemilih CSS untuk pertanyaan yang lebih khusus.

Contoh:

document.querySelector(selector);

---

5. Kes Penggunaan Biasa

Memilih mengikut ID:

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

Memilih mengikut Kelas:

document.querySelectorAll(selector);

Memilih mengikut Nama Teg:

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

Pemilih Atribut:

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

Pemilih Anak Kesembilan:

const containerParagraph = document.querySelector("#container .text");
console.log(containerParagraph.textContent); // Output: First paragraph

---

6. Mengulangkan Lebih Elemen daripada querySelectorAll

Memandangkan querySelectorAll mengembalikan NodeList, anda boleh mengulanginya menggunakan forEach, for...of, atau pengindeksan.

Contoh:

const header = document.querySelector("#header");

---

7. Koleksi Langsung lwn Koleksi Statik

• querySelectorAll mengembalikan NodeList statik, bermakna ia tidak dikemas kini jika DOM berubah.
• Gunakan getElementsByClassName atau getElementsByTagName untuk koleksi langsung.

Contoh:

const buttons = document.querySelectorAll(".button");

---

8. Ralat Pengendalian

Jika tiada unsur sepadan ditemui:

• pemilih pertanyaan: Mengembalikan batal.
• querySelectorAll: Mengembalikan NodeList kosong.

Contoh:

const paragraphs = document.querySelectorAll("p");

---

9. Ringkasan

• Gunakan querySelector untuk memilih satu elemen dan querySelectorAll untuk berbilang elemen.
• Kedua-dua kaedah menyokong pemilih CSS yang berkuasa untuk penyasaran yang tepat.
• querySelectorAll mengembalikan NodeList statik, yang boleh diulang dengan mudah.
• Ia adalah alat serba boleh untuk manipulasi DOM moden dan selalunya diutamakan berbanding kaedah lama seperti getElementById atau getElementsByClassName.

Menguasai kaedah ini akan menjadikan kod JavaScript anda lebih bersih dan cekap!

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.