JavaScript-ում պսեդդոմասիվների տեսակների տարբերությունը

Պսեդդոմասիվների երկու տեսակների տարբերությունը կայանում է DOM տարրերը փոխելիս դրանց տարբեր վարքագծում։ Ենթադրենք, օրինակ, մենք ստացանք պարբերությունների հավաքածու HTMLCollection և NodeList տեսքով։ Այնուհետև մենք կստեղծենք և կավելացնենք ևս մեկ պարբերություն մեր DOM-ում: Այս դեպքում այն ավտոմատ կերպով կհայտնվի HTMLCollection-ում, բայց NodeList հավաքածուն կմնա անփոփոխ։

Դիտարկենք օրինակով: Ենթադրենք մենք ունենք div, որի ներսում գտնվում են պարբերություններ: Ստացենք մեր div-ը և նույն պարբերությունները տարբեր տեսակի երկու հավաքածուների տեսքով.

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

Ավելացնենք ևս մեկ պարբերություն մեր div-ում.

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

Արդյունքում հավաքածուներից մեկը կփոխվի, իսկ երկրորդը՝ ոչ.

console.log(elems1); // 4 պարբերություն - նորով
console.log(elems2); // 3 սկզբնական պարբերություն

Ստուգեք, թե ինչպես կվարվի children հատկությունը նոր տարր ավելացնելիս։

Ստուգեք, թե ինչպես կվարվի childNodes հատկությունը նոր տարր ավելացնելիս։