A különbség a pszeudótömbök típusai között JavaScriptben

A két pszeudótömb típus közötti különbség a DOM elemek megváltoztatásakor mutatkozó különböző viselkedésben rejlik. Tegyük fel például, hogy egy gyűjteményt kaptunk a bekezdésekből HTMLCollection és NodeList formájában is. Ezután létrehozunk és hozzáadunk egy újabb bekezdést a DOM-unkhoz. Ebben az esetben az automatikusan meg fog jelenni a HTMLCollection-ben, de a NodeList gyűjtemény változatlan marad.

Nézzük meg egy példán keresztül. Legyen egy div-ünk, benne bekezdésekkel. Szerezzük meg a div-ünket és ugyanazokat a bekezdéseket két különböző típusú gyűjtemény formájában:

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

Adjunk hozzá még egy bekezdést a div-ünkhöz:

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

Ennek eredményeképpen az egyik gyűjtemény megváltozik, a másik pedig nem:

console.log(elems1); // 4 bekezdés - az újjával együtt
console.log(elems2); // 3 kezdeti bekezdés

Ellenőrizze, hogyan viselkedik a children tulajdonság egy új elem hozzáadásakor.

Ellenőrizze, hogyan viselkedik a childNodes tulajdonság egy új elem hozzáadásakor.