Розніца паміж тыпамі псеўдамасіваў у 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 пры даданні новага элемента.