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

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

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

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

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

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

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

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

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

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

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