JavaScript-da pseydomassiv turlari orasidagi farq

Ikkita pseydomassiv turi orasidagi farq DOM elementlarini o'zgartirishda turli xatti-harakatlarda namoyon bo'ladi. Masalan, faraz qilaylik, biz abzatslar to'plamini HTMLCollection va NodeList ko'rinishida oldik. Keyin biz yana bir abzats yaratamiz va qo'shamiz bizning DOM-imizga. Bu holda u avtomatik ravishda HTMLCollection-da paydo bo'ladi, lekin to'plam NodeList o'zgarishsiz qoladi.

Keling, misol orqali ko'rib chiqaylik. Faraz qilaylik bizda div bo'lsin, uning ichida abzatslar. Olaylik bizning divimiz va bir xil abzatslarni ikki xil turdagi to'plamlar ko'rinishida:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

Keling, divimizga yana bir abzats qo'shaylik:

let p = document.createElement('p');
parent.append(p);

Natijada to'plamlardan biri o'zgaradi, ikkinchisi - yo'q:

console.log(elems1); // 4 ta abzats - yangisi bilan
console.log(elems2); // 3 ta boshlang'ich abzats

children xususiyati yangi element qo'shilganda qanday harakat qilishini tekshiring.

childNodes xususiyati yangi element qo'shilganda qanday harakat qilishini tekshiring.