JavaScript တွင် အစုလိုက် အရာဝတ္ထုများရယူခြင်း

ယခင်သင်ခန်းစာများတွင် <querySelector> နည်းလမ်းကို အသုံးပြု၍ စာမျက်နှာရှိ အရာဝတ္ထုတစ်ခုတည်းကို ရယူခဲ့ပါသည်။ ယခုအခါ အရာဝတ္ထုအများအပြားကို တစ်ပြိုင်နက်ရယူရန်နှင့် အရာဝတ္ထုများစွာနှင့် လုပ်ဆောင်ချက်များကို လုပ်ဆောင်ရန် သင်ယူချိန်ရောက်ပြီဖြစ်သည်။

၎င်းအတွက် <querySelectorAll> နည်းလမ်းရှိပါသည်။ ၎င်းသည် CSS selector နှင့်ကိုက်ညီသော tag အားလုံးကို အရာဝတ္ထုများ array အဖြစ် ရယူပေးသည်။ ရှာဖွေတွေ့ရှိထားသောအရာဝတ္ထုများနှင့် တစ်ခုခုလုပ်ဆောင်လိုပါက ရရှိလာသော array နှင့် အလုပ်လုပ်ရပါမည်။ ဥပမာအားဖြင့် ၎င်းကို loop ဖြင့်လှည့်၍ loop အတွင်း အရာဝတ္ထုတစ်ခုချင်းစီနှင့် လုပ်ဆောင်ချက်တစ်ခုခုကို လုပ်ဆောင်ခြင်းဖြစ်သည်။

ဥပမာအနေဖြင့်၊ <www> class ရှိသော စာပိုဒ်များ ကျွန်ုပ်တို့တွင် ရှိတယ်ဆိုပါစို့။

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

ထိုစာပိုဒ်များ၏ array ကို ရယူကြပါစို့။ ၎င်းတို့ကို loop ဖြင့်လှည့်၍ loop အတွင်း ရှာဖွေတွေ့ရှိထားသော စာပိုဒ်များ၏ စာသားများကို console တွင် ထုတ်ပြကြပါစို့။

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

ယခု စာပိုဒ်တစ်ခုစီ၏ စာသားအဆုံးတွင် အာမေဋိတ်အမှတ်အသား (!) ထည့်ကြပါစို့။

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

စာပိုဒ်များနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ စာပိုဒ်အားလုံးကို ရှာဖွေပါ၊ ၎င်းတို့ကို loop ဖြင့်လှည့်ပါ နှင့် စာပိုဒ်တစ်ခုစီ၏ စာသားကို <'text'> တန်ဖိုးအဖြစ် သတ်မှတ်ပါ။

စာသားပါသော စာပိုဒ်များနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ စာပိုဒ်တစ်ခုစီ၏ စာသားအဆုံးတွင် ၎င်း၏ စီစဉ်ထားသောနံပါတ်ကို ရေးထည့်ပါ။

ဂဏန်းများပါသော input များ၊ စာပိုဒ်တစ်ခုနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ input များမှ ဂဏန်းများ၏ ပေါင်းလဒ်ကို ရှာဖွေပါ နှင့် ထိုပေါင်းလဒ်ကို စာပိုဒ်၏ စာသားတွင် ရေးပါ။