JavaScript တွင် tag ၏ attributes များကို properties အဖြစ်

ယခု tag များ၏ attributes များကို ရယူနည်းကို သင်ယူကြပါစို့။ ဤနေရာတွင် အောက်ပါစည်းမျဉ်းကို လိုက်နာသည်- tag ၏ attribute တစ်ခုစီသည် DOM element ၏ အလားတူအမည်ရှိ property တစ်ခုနှင့် ကိုက်ညီသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် ဤကဲ့သို့ tag တစ်ခုရှိသည်ဆိုပါစို့-

<input id="elem" type="text">

ကျွန်ုပ်တို့၏ element သို့ reference ကို variable ထဲသို့ ရယူကြပါစို့-

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

ကျွန်ုပ်တို့လိုအပ်သော attributes များ၏ တန်ဖိုးများကို ထုတ်ပြကြပါစို့-

console.log(elem.id);   // 'elem' ကို ပြသမည်
console.log(elem.type); // 'text' ကို ပြသမည်

ယခု ဥပမာအနေဖြင့် attribute ၏တန်ဖိုးကို ပြောင်းလဲကြည့်ကြပါစို့-

elem.type = 'submit';

အောက်ပါ input ကို ပေးထားသည်-

<input id="elem" type="email">

ခလုတ်တစ်ခုလည်း ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ အထက်ဖော်ပြပါ input ၏ type attribute အတွင်းရှိ အကြောင်းအရာကို စကရင်ပေါ်တွင် ထုတ်ပြပါ။

အောက်ပါ input ကို ပေးထားသည်-

<input id="elem" type="email">

ခလုတ်တစ်ခုလည်း ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ type attribute အတွင်းသို့ submit တန်ဖိုးကို ရေးထည့်ပါ။

သင့်တွင် a tag ပုံစံ link တစ်ခု၊ ခလုတ်တစ်ခုနှင့် paragraph တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ link ၏ href attribute အတွင်းရှိ အကြောင်းအရာကို paragraph ထဲသို့ ထုတ်ပြပါ။

သင့်တွင် link တစ်ခုနှင့် ခလုတ်တစ်ခု ရှိသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ link ၏ စာသားအဆုံးသို့ ၎င်း၏ href attribute အတွင်းရှိ အကြောင်းအရာကို ကွင်းစကွင်းပိတ် အတွင်း၌ ထည့်သွင်းပေးပါ။

သင့်တွင် ရုပ်ပုံတစ်ပုံ ရှိသည်။ ၎င်းကို img tag ဖြင့် စာမျက်နှာပေါ်တွင် ထားရှိပါ။ ခလုတ်တစ်ခုနှင့် paragraph တစ်ခုကိုလည်း ပေးထားသည်။ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ paragraph ထဲသို့ ရုပ်ပုံ၏ src attribute မှ လမ်းကြောင်းကို ရေးသွားပါစေ။

img tag အတွင်း ရုပ်ပုံတစ်ပုံနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ width attribute ထဲသို့ 300 တန်ဖိုးကို ရေးထည့်ပါ။

img tag အတွင်း ရုပ်ပုံတစ်ပုံနှင့် ခလုတ်တစ်ခု ပေးထားသည်။ width attribute ထဲတွင် အချို့သော အကျယ်အဝန်းကို သတ်မှတ်ထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ ရုပ်ပုံ၏အကျယ်အဝန်းသည် 2 � တိုးလာမည့် ခလုတ်တစ်ခုကို ပြုလုပ်ပါ။

သင့်တွင် ရုပ်ပုံနှစ်ပုံ ရှိသည်။ စာမျက်နှာပေါ်တွင် img tag တစ်ခုနှင့် ခလုတ်နှစ်ခု ပြုလုပ်ပါ။ ပထမခလုတ်ကို နှိပ်လိုက်သောအခါ src attribute ထဲသို့ ပထမရုပ်ပုံသို့ လမ်းကြောင်းကို ရေးထည့်ပါ၊ ဒုတိယခလုတ်ကို နှိပ်လိုက်သောအခါတွင် ဒုတိယရုပ်ပုံသို့ လမ်းကြောင်းကို ရေးထည့်ပါ။