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); // စာပိုဒ် ၄ ခု - အသစ်နှင့်အတူ
console.log(elems2); // စာပိုဒ် ၃ ခု ကနဦးအတိုင်း

�သစ်သောအစိတ်အပိုင်းတစ်ခု ထည့်သွင်းသည့်အခါ children ဂုဏ်သတ္တိသည် မည်သို့ပြုမူမည်ကို စစ်ဆေးကြည့်ပါ။

အသစ်သောအစိတ်အပိုင်းတစ်ခု ထည့်သွင်းသည့်အခါ childNodes ဂုဏ်သတ္တိသည် မည်သို့ပြုမူမည်ကို စစ်ဆေးကြည့်ပါ။