Diferența dintre tipurile de pseudo-array-uri în JavaScript

Diferența dintre cele două tipuri de pseudo-array-uri constă în comportamentul diferit la modificarea elementelor DOM. Să presupunem, de exemplu, că am obținut o colecție de paragrafe sub forma HTMLCollection și sub forma NodeList. Apoi vom crea și vom adăuga încă un paragraf în DOM-ul nostru. În acest caz, acesta va apărea automat în HTMLCollection, dar colecția NodeList va rămâne neschimbată.

Să ne uităm la un exemplu. Să avem un div, iar în el paragrafe. Vom obține div-ul nostru și aceleași paragrafe sub formă de colecții de două tipuri diferite:

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

Să adăugăm încă un paragraf în div-ul nostru:

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

Ca rezultat, una dintre colecții se va schimba, iar a doua - nu:

console.log(elems1); // 4 paragrafe - cu cel nou
console.log(elems2); // 3 paragrafe inițiale

Verificați cum se va comporta proprietatea children la adăugarea unui element nou.

Verificați cum se va comporta proprietatea childNodes la adăugarea unui element nou.