JavaScript HTML DOM Node စာရင်းများ
HTML DOM NodeList Object
အရာဝတ္ထု တစ်ခုသည် NodeList
စာရွက်စာတမ်းတစ်ခုမှ ထုတ်နုတ်ထားသော node များစာရင်း (စုဆောင်းမှု) တစ်ခုဖြစ်သည်။
အရာဝတ္ထု တစ်ခုသည် NodeList
အရာဝတ္ထုတစ်ခုနှင့် နီးပါးတူသည် HTMLCollection
။
အချို့သော (အဟောင်း) ဘရောက်ဆာများသည် HTMLCollection အစား NodeList အရာဝတ္ထုကို ပြန်ပေးသည် getElementsByClassName()
။
ဘရောက်ဆာများအားလုံးသည် ပိုင်ဆိုင်မှုအတွက် NodeList အရာဝတ္ထုကို ပြန်ပေးသည် childNodes
။
ဘရောက်ဆာအများစုသည် နည်းလမ်းအတွက် NodeList အရာဝတ္ထုကို ပြန်ပေးသည် querySelectorAll()
။
အောက်ပါကုဒ်သည် <p>
စာရွက်စာတမ်းတစ်ခုရှိ node အားလုံးကို ရွေးသည်-
ဥပမာ
const myNodeList = document.querySelectorAll("p");
NodeList ရှိ အစိတ်အပိုင်းများကို အညွှန်းနံပါတ်ဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။
ဒုတိယ <p> node ကိုဝင်ရောက်ရန် သင်ရေးနိုင်သည်-
myNodeList[1]
မှတ်ချက်- အညွှန်းကိန်းသည် 0 တွင် စတင်သည်။
HTML DOM Node စာရင်း အရှည်
length
ပိုင်ဆိုင်မှုသည် node စာရင်းတစ်ခုရှိ node အရေအတွက်ကို သတ်မှတ်သည် -
ဥပမာ
myNodelist.length
node list တစ်ခုရှိ node များမှတဆင့် loop ပတ်လိုသောအခါ တွင် length
ပိုင်ဆိုင်မှုသည် အသုံးဝင်သည်-
ဥပမာ
node စာရင်းရှိ <p> ဒြပ်စင်အားလုံး၏ အရောင်ကို ပြောင်းပါ-
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
HTMLCollection နှင့် NodeList အကြား ကွာခြားချက်
( HTMLCollection
ယခင်အခန်း) သည် HTML အစိတ်အပိုင်းများ စုစည်းမှုတစ်ခုဖြစ်သည်။
A NodeList
သည် document node များစုစည်းမှုတစ်ခုဖြစ်သည်။
NodeList နှင့် HTML စုစည်းမှုတစ်ခုသည် အလွန်တူညီသောအရာဖြစ်သည်။
HTMLCollection object နှင့် NodeList object နှစ်ခုလုံးသည် array-like list (collection) တစ်ခုဖြစ်သည်။
နှစ်ခုစလုံးတွင် စာရင်း (စုဆောင်းမှု) ရှိ ပစ္စည်းအရေအတွက်ကို သတ်မှတ်သည့် အရှည်ပိုင်ဆိုင်မှုတစ်ခုရှိသည်။
နှစ်ခုလုံးသည် array တစ်ခုကဲ့သို့ အရာတစ်ခုစီသို့ ဝင်ရောက်ရန် အညွှန်းတစ်ခု (0၊ 1၊ 2၊ 3၊ 4၊ ...) ကို ပေးသည်။
HTML စုဆောင်းသည့်အရာများကို ၎င်းတို့၏အမည်၊ အိုင်ဒီ သို့မဟုတ် အညွှန်းနံပါတ်ဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်သည်။
NodeList ပစ္စည်းများကို ၎င်းတို့၏ အညွှန်းနံပါတ်ဖြင့်သာ ဝင်ရောက်နိုင်သည်။
NodeList object သာလျှင် attribute node နှင့် text node များ ပါဝင်နိုင်သည်။
node list သည် array မဟုတ်ပါ။
node list သည် array တစ်ခုနှင့်တူနိုင်သည်၊ သို့သော် ထိုသို့မဟုတ်ပါ။
သင်သည် node စာရင်းကိုလှည့်ပတ်နိုင်ပြီး array တစ်ခုကဲ့သို့၎င်း၏ node များကိုရည်ညွှန်းနိုင်သည်။
သို့သော်၊ node စာရင်းတွင် valueOf(), push(), pop(), သို့မဟုတ် join() ကဲ့သို့ Array Methods ကို သင် အသုံးမပြုနိုင်ပါ။