querySelectorAll()
Misol
("myDiv" ichidagi) class="example" bo‘lgan birinchi elementning fon rangini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
list[0].style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Tavsif
querySelectorAll() metodi CSS selektor(lar)iga mos keladigan barcha bola 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
element.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 |
| NodeList | CSS selektor(lar)iga mos keladigan avlod elementlar kolleksiyasi. NodeList statik (DOM’dagi o‘zgarishlar kolleksiyaga HECH QANDAY ta’sir qilmaydi). Ko‘rsatilgan selektor(lar) noto‘g‘ri bo‘lsa, SYNTAX_ERR istisnosi yuzaga keladi. |
Ko‘proq misollar
Misol
"myDIV" ichidagi birinchi <p> elementining fon rangini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
list[0].style.backgroundColor = "red";
O‘zingiz sinab ko‘ring »
Misol
"myDIV" ichidagi class="example" bo‘lgan birinchi <p> elementining fonini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p.example");
list[0].style.backgroundColor = "red"
O‘zingiz sinab ko‘ring »
Misol
"myDIV" ichida class="example" bo‘lgan nechta element bor:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example")
let len = list.length;
O‘zingiz sinab ko‘ring »
Misol
"myDIV" ichidagi class="example" bo‘lgan barcha elementlarning fonini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll(".example");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Misol
"myDIV" ichidagi barcha <p> elementlarining fon rangini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("p");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Misol
"myDIV" ichidagi "target" atributiga ega barcha <a> elementlarining chegara uslubini o‘rnating:
const element = document.getElementById("myDIV");
const list = element.querySelectorAll("a[target]");
for (let i = 0; i < list.length; i++) {
list[i].style.border = "10px solid red";
}
O‘zingiz sinab ko‘ring »
Misol
Hujjatdagi barcha <h3> va <span> elementlarining fon rangini o‘rnating:
const list = document.querySelectorAll("h3, span");
for (let i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "red";
}
O‘zingiz sinab ko‘ring »
Brauzerlarda qo‘llab-quvvatlash
element.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!