JavaScript တွင် Node များနှင့် အလုပ်လုပ်ခြင်း

သင်သိထားသည့်အတိုင်း၊ tag များတွင် အခြား tag များ ပါဝင်နိုင်ပါသည်၊ သို့မဟုတ် JavaScript ဝေါဟာရဖြင့် ပြောရလျှင် DOM elements များတွင် အခြား DOM elements များ ပါဝင်နိုင်ပါသည်။ ထို့အပြင်၊ ၎င်းတို့အတွင်း၌ မှတ်ချက်များ (comments) နှင့် သာမန်စာသားများ (text) လည်း ရှိနိုင်ပါသည်။ မှတ်ချက်များ၊ စာသားများနှင့် DOM elements များအားလုံးကို အုပ်စုခေါင်းစဉ်တစ်ခုဖြင့် ခေါ်ဝေါ်ကြသည် - Node များ။

firstElementChild, lastElementChild, nextElementSibling, previousElementSibling စသော ဂုဏ်သတ္တိများကို သင်သိပြီးဖြစ်ပါသည်။ ဤဂုဏ်သတ္တိများသည် အခြား node များကို လျစ်လျူရှုကာ DOM element များနှင့်သာ အလုပ်လုပ်ပါသည်။ ပုံမှန်အားဖြင့်၊ ကျွန်ုပ်တို့လိုအပ်တာက ထိုအရာပင် ဖြစ်ပါသည်။

သို့သော်၊ firstChild, lastChild, nextSibling, previousSibling စသော ဂုဏ်သတ္တိများလည်း ရှိပါသည်။ ဤဂုဏ်သတ္တိများသည် အလားတူ လုပ်ဆောင်သော်လည်း၊ node အားလုံးကို ထည့်သွင်းစဉ်းစားပါသည်။ ဥပမာတစ်ခုဖြင့် ဤဂုဏ်သတ္တိများကြား ကွာခြားချက်ကို ကြည့်ရအောင်။ ကိုယ်တို့မှာ node သုံးခုပါဝင်သော div တစ်ခု ရှိတယ်ဆိုပါစို့။

<div id="elem">စာသား<span>tag</span></div>

ဤ div အတွက် reference ကို variable တစ်ခုထဲ ရယူကြပါစို့။

let elem = document.querySelector('#elem');

ယခု firstChild နှင့် firstElementChild ဂုဏ်သတ္တိများထဲတွင် ဘာတွေပါဝင်သလဲဆိုတာ ကြည့်ရအောင်။

console.log(elem.firstChild);        // မှတ်ချက်
console.log(elem.firstElementChild); // span tag

lastChild နှင့် lastElementChild ကြားကွာခြားချက်ကို ပြသနိုင်မည့် ကုဒ်ကို ရေးပါ။

nextSibling နှင့် nextElementSibling ကြားကွာခြားချက်ကို ပြသနိုင်မည့် ကုဒ်ကို ရေးပါ။

previousSibling နှင့် previousElementSibling ကြားကွာခြားချက်ကို ပြသနိုင်မည့် ကုဒ်ကို ရေးပါ။