querySelector()
Misollar
Birinchi <p> elementini oling:
document.querySelector("p");
O‘zingiz sinab ko‘ring »
class="example" bo‘lgan birinchi elementni oling:
document.querySelector(".example");
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
querySelector() metodi CSS selektoriga mos keladigan birinchi elementni qaytaradi.
Barcha mosliklarni (faqat birinchisini emas) qaytarish uchun uning o‘rniga querySelectorAll()’dan foydalaning.
Selektor(lar) noto‘g‘ri bo‘lsa, querySelector() ham, querySelectorAll() ham SYNTAX_ERR istisnosini chiqaradi.
Darsliklar:
CSS selektorlari ma’lumotnomasi
HTML DOM NodeList ma’lumotnomasi
QuerySelector metodlari:
GetElement metodlari:
HTMLCollection va NodeList o‘rtasidagi farq
NodeList va HTMLcollection deyarli bir xil narsa.
Ikkalasi ham hujjatdan ajratib olingan tugunlarning (elementlarning) massivsimon kolleksiyalari (ro‘yxatlari). Tugunlarga indeks raqamlari orqali murojaat qilish mumkin. Indeks 0 dan boshlanadi.
Ikkalasida ham ro‘yxatdagi (kolleksiyadagi) elementlar sonini qaytaradigan length xususiyati bor.
HTMLCollection — hujjat elementlari kolleksiyasi.
NodeList — hujjat tugunlari (element tugunlari, atribut tugunlari va matn tugunlari) kolleksiyasi.
HTMLCollection elementlariga ularning nomi, id’si yoki indeks raqami orqali murojaat qilish mumkin.
NodeList elementlariga faqat indeks raqami orqali murojaat qilish mumkin.
HTMLCollection har doim jonli (live) kolleksiya bo‘ladi. Misol: agar DOM’dagi ro‘yxatga <li> elementini qo‘shsangiz, HTMLCollection’dagi ro‘yxat ham o‘zgaradi.
NodeList ko‘pincha statik kolleksiya bo‘ladi. Misol: agar DOM’dagi ro‘yxatga <li> elementini qo‘shsangiz, NodeList’dagi ro‘yxat o‘zgarmaydi.
getElementsByClassName() va getElementsByTagName() metodlari jonli HTMLCollection qaytaradi.
querySelectorAll() metodi statik NodeList qaytaradi.
childNodes xususiyati jonli NodeList qaytaradi.
Sintaksis
document.querySelector(CSS selectors)
Parametrlar
| Parametr | Tavsif |
| CSS selectors |
Majburiy. Bir yoki bir nechta CSS selektorlari. CSS selektorlari HTML elementlarni id, klasslar, tiplar, atributlar, atribut qiymatlari va h.k. asosida tanlaydi. To‘liq ro‘yxat uchun CSS selektorlari ma’lumotnomasiga o‘ting. Bir nechta selektor uchun har bir selektorni vergul bilan ajrating ("Ko‘proq misollar" bo‘limiga qarang). |
Qaytariladigan qiymat
| Tip | Tavsif |
| Object | CSS selektor(lar)iga mos keladigan birinchi elementdan iborat NodeList. Hech qanday moslik topilmasa, null qaytariladi. |
Ko‘proq misollar
class="example" bo‘lgan birinchi <p> elementini oling:
document.querySelector("p.example");
O‘zingiz sinab ko‘ring »
id="demo" bo‘lgan elementning matnini o‘zgartiring:
document.querySelector("#demo").innerHTML = "Hello World!";
O‘zingiz sinab ko‘ring »
Ota elementi <div> bo‘lgan birinchi <p> elementini tanlang.
document.querySelector("div > p");
O‘zingiz sinab ko‘ring »
"target" atributiga ega birinchi <a> elementini tanlang:
document.querySelector("a[target]");
O‘zingiz sinab ko‘ring »
Birinchi <h3> yoki birinchi <h4> elementini tanlang:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Birinchi <h3> yoki birinchi <h4> elementini tanlang:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
document.querySelector() — DOM Level 1 (1998) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!