Różnica między typami pseudo-tablic w JavaScript

Różnica między dwoma typami pseudo-tablic polega na różnym zachowaniu przy zmianie elementów DOM. Załóżmy, na przykład, że otrzymaliśmy kolekcję akapitów jako HTMLCollection i jako NodeList. Następnie utworzymy i dodamy jeszcze jeden akapit do naszego DOM. W tym przypadku automatycznie pojawi się on w HTMLCollection, ale kolekcja NodeList pozostanie niezmieniona.

Spójrzmy na przykład. Niech bedzie div, a w nim akapity. Pobierzmy naszego diva i te same akapity jako kolekcje dwóch różnych typów:

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

Dodajmy jeszcze jeden akapit do naszego diva:

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

W rezultacie jedna z kolekcji ulegnie zmianie, a druga - nie:

javascriptconsole.log(elems1); // 4 akapity - z nowym
console.log(elems2); // 3 początkowe akapity