Verskil tussen tipes pseudo-arrys in JavaScript

Die verskil tussen die twee tipes pseudo-arrys lê in hul verskillende gedrag wanneer DOM-elemente verander word. Gestel, byvoorbeeld, ons het 'n versameling paragrawe in die vorm van HTMLCollection en in die vorm van NodeList. Daarna skep en voeg ons nog 'n paragraaf by ons DOM. In hierdie geval sal dit outomaties verskyn in die HTMLCollection, maar die versameling NodeList sal onveranderd bly.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n div, en daarin paragrawe. Laat ons kry ons div en dieselfde paragrawe in die vorm van versamelings van twee verskillende tipes:

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

Laat ons nog 'n paragraaf by ons div voeg:

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

As gevolg sal een van die versamelings verander, maar die tweede een - nie:

console.log(elems1); // 4 paragrawe - met die nuwe een
console.log(elems2); // 3 aanvanklike paragrawe

Toets hoe die eienskap children sal optree wanneer 'n nuwe element bygevoeg word.

Toets hoe die eienskap childNodes sal optree wanneer 'n nuwe element bygevoeg word.