Skirtumas tarp pseudo masyvo tipų JavaScript

Skirtumas tarp dviejų pseudo masyvo tipų yra skirtingame elgesyje keičiant DOM elementus. Tarkime, pavyzdžiui, gavome pastraipų kolekciją kaip HTMLCollection ir kaip NodeList. Tada sukursime ir pridėsime dar vieną pastraipą į mūsų DOM. Šiuo atveju ji automatiškai pasirodys HTMLCollection, bet kolekcija NodeList liks nepakitusi.

Pažiūrėkime į pavyzdį. Turėkime div, o jame - pastraipas. Gaukime mūsų div ir tas pačias pastraipas kaip skirtingų tipų kolekcijas:

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

Pridėkime dar vieną pastraipą į mūsų div:

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

Rezultate viena kolekcija pasikeis, o antroji - ne:

console.log(elems1); // 4 pastraipos - su nauja
console.log(elems2); // 3 pradinės pastraipos

Patikrinkite, kaip elgsis savybė children pridėjus naują elementą.

Patikrinkite, kaip elgsis savybė childNodes pridėjus naują elementą.