querySelectorAll()
Misol
class="example" bo‘lgan barcha elementlarni tanlang:
document.querySelectorAll(".example");
O‘zingiz sinab ko‘ring »
Quyida ko‘proq misollar.
Tavsif
querySelectorAll() metodi CSS selektor(lar)iga mos keladigan barcha elementlarni qaytaradi.
querySelectorAll() metodi NodeList qaytaradi.
Selektor(lar) noto‘g‘ri bo‘lsa, querySelectorAll() metodi SYNTAX_ERR istisnosini chiqaradi
Darsliklar:
CSS selektorlari ma’lumotnomasi
JavaScript tugunlar ro‘yxati (Node List) darsligi
QuerySelector metodlari:
Element querySelector() metodi
Element querySelectorAll() metodi
Document querySelector() metodi
Document querySelectorAll() metodi
GetElement metodlari:
Document getElementById() metodi
NodeList
NodeList — tugunlarning massivsimon kolleksiyasi (ro‘yxati).
Ro‘yxatdagi tugunlarga indeks orqali murojaat qilish mumkin. Indeks 0 dan boshlanadi.
length xususiyati ro‘yxatdagi tugunlar sonini qaytaradi.
Sintaksis
document.querySelectorAll(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 elementlardan iborat NodeList obyekti. Hech qanday moslik topilmasa, bo‘sh NodeList obyekti qaytariladi. |
Ko‘proq misollar
Birinchi <p> elementiga fon rangi qo‘shing:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
class="example" bo‘lgan birinchi <p> elementiga fon rangi qo‘shing:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
class="example" bo‘lgan elementlar soni:
let numb = document.querySelectorAll(".example").length;
O‘zingiz sinab ko‘ring »
class="example" bo‘lgan barcha elementlarning fon rangini o‘rnating:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Barcha <p> elementlarining fon rangini o‘rnating:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
"target" atributiga ega barcha <a> elementlarining chegarasini o‘rnating:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
O‘zingiz sinab ko‘ring »
Ota elementi <div> bo‘lgan har bir <p> elementining fon rangini o‘rnating:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Barcha <h3> va <span> elementlarining fon rangini o‘rnating:
const nodeList = document.querySelectorAll("h3, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
document.querySelectorAll() DOM Level 3 (2004) imkoniyatidir.
U barcha zamonaviy brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!