Working with Attributes

HTML Element တွေမှာ ပါဝင်တဲ့ Attribute တွေကို ပြင်ဆင်ချင်ပါသလား? ဥပမာ - Image ရဲ့ src (ပုံ လမ်းကြောင်း) ပြောင်းမလား? Link ရဲ့ href (သွားမယ့် လင့်ခ်) ပြောင်းမလား? ဒီလို ပြုပြင်ဖို့အတွက် getAttribute, setAttribute နဲ့ removeAttribute ဆိုတဲ့ Method (၃) ခုကို အသုံးပြုနိုင်ပါတယ်။

၁။ getAttribute (တန်ဖိုး ရယူခြင်း)

Attribute တစ်ခုရဲ့ တန်ဖိုး (Value) ကို သိချင်/လိုချင်တဲ့အခါ အသုံးပြုပါတယ်။

let link = document.querySelector("a");
let url = link.getAttribute("href"); // "href" ထဲက တန်ဖိုးကို ဆွဲထုတ်လိုက်တာပါ
console.log(url); // ဥပမာ - "https://google.com"

၂။ setAttribute (တန်ဖိုး အသစ်သတ်မှတ်ခြင်း)

ရှိပြီးသား Attribute ရဲ့ တန်ဖိုးကို ပြင်ချင်တဲ့အခါ (သို့မဟုတ်) အသစ်တစ်ခု ဖန်တီးထည့်သွင်းချင်တဲ့အခါ အသုံးပြုပါတယ်။

let img = document.querySelector("img");
// ပုံဟောင်း နေရာမှာ ပုံအသစ် ပြောင်းထည့်လိုက်ပါမယ်
img.setAttribute("src", "new-image.png");

၃။ removeAttribute (ဖျက်ပစ်ခြင်း)

မလိုအပ်တော့တဲ့ Attribute တစ်ခုလုံးကို အမြစ်ပြတ် ဖျက်ပစ်ချင်တဲ့အခါ သုံးပါတယ်။

let btn = document.querySelector("button");
// ခလုတ်ကို နှိပ်လို့မရအောင် ပိတ်ထားတဲ့ "disabled" ဆိုတဲ့ Attribute ကို ဖျက်လိုက်ရင် ခလုတ်ပြန်နှိပ်လို့ ရသွားပါမယ်
btn.removeAttribute("disabled");

Direct Property Access (ပိုမိုလွယ်ကူသော တိုက်ရိုက်ခေါ်နည်း)

HTML ရဲ့ စံသတ်မှတ်ချက် (Standard) အတိုင်း ရှိနေတဲ့ Attribute အများစုကိုတော့ getAttribute တွေ သုံးနေမယ့် အစား . (Dot) ခံပြီး တိုက်ရိုက် ခေါ်သုံးလို့ / ပြင်လို့ ရပါတယ်။

img.src = "pic.jpg"; // ပုံပြောင်းမယ်
input.value = "Hello"; // Input box ထဲ စာထည့်မယ်
link.href = "https://facebook.com"; // လင့်ခ် ပြောင်းမယ်