JavaScript တွင် DOM element ရယူခြင်း

ယခု ကျွန်ုပ်တို့သည် စာမျက်နှာရှိ DOM element များကို ရယူနည်းကို သင်ယူပြီး နောင်တွင် ၎င်းတို့ကို မည်သည့်လုပ်ဆောင်ချက်များ ဆောင်ရွက်နိုင်မည်နည်း။

ကျွန်ုပ်တို့တွင် button တစ်ခုရှိသည်ဆိုပါစို့။

<input id="button" type="submit">

ဤ button ကို variable တစ်ခုအနေဖြင့် ရယူကြပါစို့။ ထိုသို့ပြုလုပ်ရန် အထူး object document ၏ method querySelector ကို အသုံးပြုသင့်သည်။ ဤ method သည် CSS selector တစ်ခုကို parameter အဖြစ်လက်ခံပြီး ထို selector ဖြင့်ရှာဖွေတွေ့ရှိသော element ၏ reference ကို ပြန်ပေးသည်။

ကျွန်ုပ်တို့၏ button လေးတွင် id attribute တန်ဖိုး button ဖြင့်ရှိသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် ဤ button ကို selector #button ဖြင့်ရှာနိုင်သည်။ သို့ဖြစ်၍ ကျွန်ုပ်တို့၏ button လေးကိုရှာပြီး ၎င်း၏ reference ကို variable တစ်ခုအတွင်းသို့ ရေးကြပါစို့။

let button = document.querySelector('#button');
console.log(button);

စာပိုဒ် 3 ခုရှိသည်။

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

စာပိုဒ်တစ်ခုစီ၏ reference ကို သီးခြား variable တစ်ခုစီသို့ ရေးထည့်ပြီး ထို variable များအတွင်းရှိ အကြောင်းအရာကို console တွင်ထုတ်ပြပါ။