JavaScriptда псевдомассив турларининг фарқи

Икки турдаги псевдомассивларнинг фарқи DOM элементлари ўзгартирилганда турли хат-харакатда бўлишидадир. Фарз қилайлик, масалан, биз абзацлар тўпламини HTMLCollection ва NodeList кўринишида олдик. Сўнгра биз яна бир абзац яратиб, уни бизнинг DOMга қўшамиз. Бунда у автоматик тарзда HTMLCollectionда пайдо бўлади, лекин NodeList тўплами ўзгармас қолади.

Келинг, мисолда кўрайлик. Фарз қилайлик, бизда див бўлсин, уннинг ичида абзацлар бўлсин. Биз дивимизни ва ўша абзацларни икки хил турдаги тўпламлар кўринишида оламиз:

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

Яна бир абзацни бизнинг дивга қўшайлик:

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

Натижада тўпламларнинг бири ўзгаради, иккинчиси - ўзгармайди:

console.log(elems1); // 4 абзац - янгиси билан
console.log(elems2); // 3 та бошланғич абзац

children хусусияти янги элемент қўшылганда қандай хат-харакат қилишини текшириб кўринг.

childNodes хусусияти янги элемент қўшылганда қандай хат-харакат қилишини текшириб кўринг.