Разница между типами псевдомассивов в JavaScript

Разница между двумя типами псевдомассивов в различном поведении при изменении DOM элементов. Пусть, к примеру, мы получили коллекцию абзацев в виде HTMLCollection и в виде NodeList. Затем мы создадим и добавим еще один абзац в наш DOM. В этом случае он автоматически появится в HTMLCollection, но коллекция NodeList останется без изменений.

Давайте посмотрим на примере. Пусть у нас будет див, а в нём абзацы. Получим наш див и одни и те же абзацы в виде коллекций двух разных типов:

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

Добавим еще один абзац в наш див:

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

В результате одна из коллекций изменится, а вторая - нет:

javascriptconsole.log(elems1); // 4 абзаца - с новым
console.log(elems2); // 3 начальных абзаца