სხვაობა JavaScript-ში პსევდომასივების ტიპებს შორის

სხვაობა პსევდომასივების ორ ტიპს შორის განხორციელდება DOM ელემენტების ცვლილებისას. მაგალითად, დავუშვათ, ჩვენ მივიღეთ აბზაცების კოლექცია როგორც HTMLCollection და როგორც NodeList. შემდეგ ჩვენ შევქმნით და დავამატებთ კიდევ ერთ აბზაცს ჩვენს DOM-ში. ამ შემთხვევაში ის ავტომატურად გამოჩნდება HTMLCollection-ში, მაგრამ კოლექცია NodeList უცვლელი დარჩება.

მოდით შევხედოთ მაგალითს. დავუშვათ, ჩვენ გვაქვს div, და მასში აბზაცები. მივიღოთ ჩვენი div და იგივე აბზაცები სხვადასხვა ტიპის კოლექციების სახით:

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

დავამატოთ კიდევ ერთი აბზაცი ჩვენს div-ში:

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

შედეგად ერთ-ერთი კოლექცია შეიცვლება, მეორე კი - არა:

console.log(elems1); // 4 აბზაცი - ახალი ჩათვლით
console.log(elems2); // 3 საწყისი აბზაცი

შეამოწმეთ, როგორ იქნება ქცევა children თვისების ახალი ელემენტის დამატებისას.

შეამოწმეთ, როგორ იქნება ქცევა childNodes თვისების ახალი ელემენტის დამატებისას.