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 касиетинин жаңы элемент кошулганда кандай алып жүрөрүн текшериңиз.