HTML NodeList
NodeList
NodeList — Node obyektlaridan iborat massivga o‘xshash kolleksiya (ro‘yxat).
NodeList’dagi tugunlarga indeks orqali murojaat qilish mumkin (0 dan boshlanadi).
length xususiyati NodeList’dagi tugunlar sonini qaytaradi.
NodeList va HTMLCollection
NodeList deyarli HTMLCollection bilan bir xil.
Quyidagi tavsifga qarang.
Xususiyatlar va metodlar
NodeList bilan quyidagi xususiyatlar va metodlardan foydalanish mumkin:
| Nomi | Tavsif |
|---|---|
| entries() | Ro‘yxatdagi kalit/qiymat juftliklariga ega Iterator qaytaradi |
| forEach() | Ro‘yxatdagi har bir tugun uchun callback funksiyasini bajaradi |
| item() | Ko‘rsatilgan indeksdagi tugunni qaytaradi |
| keys() | Ro‘yxatdagi kalitlarga ega Iterator qaytaradi |
| length | NodeList’dagi tugunlar sonini qaytaradi |
| values() | Ro‘yxatdagi qiymatlarga ega Iterator qaytaradi |
Misol
Hujjatdagi barcha <p> tugunlarini tanlang:
const myNodeList = document.querySelectorAll("p");
NodeList’dagi elementlarga indeks raqami orqali murojaat qilish mumkin.
Ikkinchi <p> tuguniga murojaat qilish uchun quyidagicha yozishingiz mumkin:
myNodeList[1]
O‘zingiz sinab ko‘ring »
Eslatma: Indeks 0 dan boshlanadi.
HTML DOM NodeList uzunligi
length xususiyati tugunlar ro‘yxatidagi tugunlar sonini belgilaydi:
length xususiyati tugunlar ro‘yxatidagi tugunlarni sikl orqali aylanib chiqmoqchi bo‘lganingizda foydali:
Misol
Tugunlar ro‘yxatidagi barcha <p> elementlarining rangini o‘zgartiring:
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
O‘zingiz sinab ko‘ring »
Massiv emas
NodeList massiv (Array) emas!
NodeList massivga o‘xshab ko‘rinishi mumkin, lekin u massiv emas.
NodeList’ni sikl orqali aylanib chiqishingiz va uning tugunlariga indeks orqali murojaat qilishingiz mumkin.
Lekin NodeList’da push(), pop() yoki join() kabi Array metodlaridan foydalana olmaysiz.
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.
Jonli (live) NodeList
Ba’zi hollarda NodeList jonli (live) bo‘ladi: DOM’dagi o‘zgarish NodeList’ni yangilaydi.
childNodes metodi jonli (live) NodeList qaytaradi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!