JavaScript တွင် ကွင်းဆက်များ၏ အားသာချက်များနှင့် အားနည်းချက်များ

ကွင်းဆက်များသည် ကုဒ်ကို တိုစေသော်လည်း၊ အများစုသော အခြေအနေများတွင် ကိန်းရှင်တစ်ခု မိတ်ဆက်ခြင်းသည် ပို၍ အဆင်ပြေပါသည်။ ဥပမာနှစ်ခုကို နှိုင်းယှဉ်ကြည့်ပါ - ကျွန်ုပ်သည် ယခု elem ကိန်းရှင်ကို မိတ်ဆက်ထားပြီး မည်မျှပင် ဂုဏ်သတ္တိများ ရေးသားနိုင်သည်၊ ထိုအခါ querySelector ကို တစ်ကြိမ်သာ ခေါ်ယူပါသည်။

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

ယခု ကျွန်ုပ်သည် ကိန်းရှင်အသစ်မမိတ်ဆက်သောကြောင့် querySelector ကို နှစ်ကြိမ် ခေါ်ရန်လိုအပ်နေသည်။

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

ကျွန်ုပ်၏အမြင်တွင်၊ ဤကုဒ်သည် တစ်ကြောင်းလျော့နည်းသွားသော်လည်း ပို၍ရှုပ်ထွေးသွားပါသည်။ ထို့အပြင် id တန်ဖိုးကို 'elem' မှ အခြားတစ်ခုခုသို့ ပြောင်းလိုပါက၊ နေရာများစွာတွင် ပြောင်းရမည်ဖြစ်ပြီး သိပ်အဆင်ပြေသည်မဟုတ်ပါ။

နောက်ထပ် ပြဿနာတစ်ခုရှိပါသည် - browser ၏ ဝန်ပိမှု။ စာမျက်နှာပေါ်ရှိ အစိတ်အပိုင်းများကို ရှာဖွေခြင်းကို querySelector method က လုပ်ဆောင်ပြီး အတော်လေး နှေးကွေးသော လုပ်ဆောင်မှုတစ်ခုဖြစ်သည် (စာမျက်နှာ၏ အစိတ်အပိုင်းများနှင့် မည်သည့်အလုပ်မဆို - ဤသည်မှာ နှေးကွေးသော လုပ်ဆောင်မှုတစ်ခုဖြစ်သည် - ဤအချက်ကို မှတ်သားထားပါ)။

ကျွန်ုပ်တို့၏ အခြေအနေတွင်၊ querySelector ကို အကြိမ်တိုင်း အသုံးပြုပါက browser သည် HTML စာမျက်နှာကို အကြိမ်တိုင်း ပြန်လည်ကိုင်တွယ်ပြီး သတ်မှတ်ထားသော id ရှိသည့် အစိတ်အပိုင်းကို အကြိမ်ကြိမ် ရှာမည်ဖြစ်သည် (id များ တူညီနေသည်ကို ဂရုမစိုက်ပါ - browser သည် လုပ်ဆောင်မှုအားလုံးကို အကြိမ်ကြိမ် လုပ်ဆောင်မည်ဖြစ်ပြီး browser ၏ လုပ်ဆောင်မှုကို နှေးကွေးစေနိုင်သော အကျိုးမရှိသည့် လုပ်ဆောင်မှုများကို ပြုလုပ်မည်ဖြစ်သည်)။

ကျွန်ုပ်တို့သည် elem ကိန်းရှင်ကို အသုံးပြုပါက - စာမျက်နှာပေါ် ရှာဖွေမှု မည်သည့်အရာမျှ မဖြစ်ပေါ်ပါ (အစိတ်အပိုင်းကို ရှာဖွေတွေ့ရှိပြီးဖြစ်ပြီး ၎င်းသို့ လမ်းညွှန်ချက်သည် ကိန်းရှင်ထဲတွင် ရှိနေပါသည်)။

အောက်ပါ ကုဒ်ကို ပေးထားသည်။

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

ဤကုဒ်၏ အားနည်းချက်များကို ညွှန်ပြပါ။ ၎င်းတို့ကို ပြင်ဆင်ပါ။