MohirDox

Ko'rinishi

JavaScript HTML DOM tugunlar ro'yxati (NodeList) ​

HTML DOM NodeList obyekti ​

NodeList obyekti — bu hujjatdan olingan tugunlar ro'yxati (kolleksiyasi).

NodeList obyekti HTMLCollection obyektiga juda o'xshash.

  • Ba'zi (eski) brauzerlar getElementsByClassName() kabi metodlar uchun HTMLCollection o'rniga NodeList qaytaradi.
  • Barcha brauzerlar childNodes xususiyati uchun NodeList qaytaradi.
  • Ko'pgina brauzerlar querySelectorAll() metodi uchun NodeList qaytaradi.

Quyidagi kod hujjatdagi barcha <p> tugunlarini tanlaydi:

js
const myNodeList = document.querySelectorAll('p')

NodeList elementlariga indeks raqami orqali murojaat qilish mumkin. Ikkinchi <p> tuguniga kirish:

js
myNodeList[1]

Eslatma

Indeks 0 dan boshlanadi.

NodeList uzunligi (length) ​

length xususiyati tugunlar ro'yxatidagi tugunlar sonini belgilaydi:

js
myNodeList.length

length xususiyati tugunlar ro'yxati bo'ylab sikl aylanishda foydali:

js
const myNodelist = document.querySelectorAll('p')

for (let i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.color = 'red'
}

HTMLCollection va NodeList o'rtasidagi farq ​

NodeList va HTMLCollection deyarli bir xil narsa.

Har ikkalasi ham hujjatdan olingan tugunlarning (elementlarning) massivga o'xshash kolleksiyasidir. Har ikkalasida ham indeks 0 dan boshlanadi va length xususiyati mavjud.

Asosiy farqlar:

  1. HTMLCollection — bu hujjat elementlari kolleksiyasi.
  2. NodeList — bu hujjat tugunlari kolleksiyasi (element tugunlari, atribut tugunlari va matn tugunlari).
  3. HTMLCollection elementlariga nomi, ID-si yoki indeksi orqali murojaat qilish mumkin.
  4. NodeList elementlariga faqat indeks raqami orqali murojaat qilish mumkin.
  5. Jonli (Live) vs Statistik (Static):
    • HTMLCollection har doim jonli kolleksiya hisoblanadi. Agar DOM-ga yangi <li> qo'shsangiz, HTMLCollectiondagi ro'yxat ham o'zgaradi.
    • NodeList ko'pincha statistik (o'zgarmas) kolleksiyadir. Agar DOM-ga yangi element qo'shsangiz, querySelectorAll() orqali olingan NodeList o'zgarmasdan qoladi.

TIP

getElementsByClassName() va getElementsByTagName() jonli HTMLCollection qaytaradi. querySelectorAll() esa statistik NodeList qaytaradi. childNodes xususiyati jonli NodeList qaytaradi.

Bu massiv emas! ​

NodeList massivga o'xshab ko'rinishi mumkin, lekin u massiv emas. Siz unda push(), pop() yoki join() kabi massiv metodlarini ishlata olmaysiz.