Dallimi midis llojeve të pseudoarray-ve në JavaScript

Dallimi midis dy llojeve të pseudoarray-ve është në sjelljen e ndryshme kur ndryshojnë elementet DOM. Le, për shembull, të kemi marrë një koleksion paragrafësh në formën HTMLCollection dhe në formën NodeList. Pastaj do të krijojmë dhe shtojmë një paragraf tjetër në DOM-in tonë. Në këtë rast, ai automatikisht do të shfaqet në HTMLCollection, por koleksioni NodeList do të mbetet i pandryshuar.

Le të shohim një shembull. Le të kemi një div, dhe brenda tij paragrafë. Le të marrim div-in tonë dhe të njëjtat paragrafë në formën e koleksioneve të dy llojeve të ndryshme:

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

Le të shtojmë një paragraf tjetër në div-in tonë:

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

Si rezultat, njëra nga koleksionet do të ndryshojë, ndërsa e dyta - jo:

console.log(elems1); // 4 paragrafë - me të rin
console.log(elems2); // 3 paragrafë fillestarë

Kontrolloni se si do të sillet vetia children gjatë shtimit të një elementi të ri.

Kontrolloni se si do të sillet vetia childNodes gjatë shtimit të një elementi të ri.