JavaScript HTML DOM အစိတ်အပိုင်းများ
ဤစာမျက်နှာသည် HTML စာမျက်နှာရှိ HTML အစိတ်အပိုင်းများကို ရှာဖွေပြီး ဝင်ရောက်နည်းကို သင်ကြားပေးပါသည်။
HTML Elements များကို ရှာဖွေခြင်း။
မကြာခဏ၊ JavaScript ဖြင့် သင်သည် HTML ဒြပ်စင်များကို ကိုင်တွယ်လိုသည်။
ထိုသို့ပြုလုပ်ရန်၊ သင်ပထမ ဦး ဆုံး element များကိုရှာဖွေရန်လိုအပ်သည်။ ထိုသို့ပြုလုပ်ရန် နည်းလမ်းများစွာ ရှိပါသည်။
- id ဖြင့် HTML အစိတ်အပိုင်းများကိုရှာဖွေခြင်း။
- Tag အမည်ဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- အတန်းအမည်ဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- CSS ရွေးချယ်မှုများဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- HTML အရာဝတ္ထုစုဆောင်းမှုများအားဖြင့် HTML အစိတ်အပိုင်းများကိုရှာဖွေခြင်း။
id ဖြင့် HTML Element ကိုရှာဖွေခြင်း။
DOM တွင် HTML ဒြပ်စင်တစ်ခုကိုရှာရန် အလွယ်ဆုံးနည်းလမ်းမှာ element id ကိုအသုံးပြုခြင်းဖြစ်သည်။
ဤနမူနာတွင် ဒြပ်စင်ကို တွေ့ရသည် id="intro"
-
ဥပမာ
const element = document.getElementById("intro");
ဒြပ်စင်ကိုတွေ့ရှိပါက နည်းလမ်းသည် ဒြပ်စင်အား အရာဝတ္တု (ဒြပ်စင်) အဖြစ် ပြန်ပေးမည်ဖြစ်သည်။
ဒြပ်စင်ကို ရှာမတွေ့ပါက၊ ဒြပ်စင်ပါ၀င် null
မည်ဖြစ်သည်။
Tag Name ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
ဤဥပမာသည် <p>
အစိတ်အပိုင်းအားလုံးကို တွေ့ရှိသည်-
ဥပမာ
const element = document.getElementsByTagName("p");
ဤနမူနာတွင် ဒြပ်စင်ကို ရှာဖွေပြီးနောက် အတွင်းရှိ အစိတ်အပိုင်း id="main"
အားလုံးကို ရှာဖွေသည် -<p>
"main"
ဥပမာ
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Class Name ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
တူညီသောအတန်းအမည်ဖြင့် HTML ဒြပ်စင်အားလုံးကို ရှာဖွေလိုပါက၊ အသုံးပြု
getElementsByClassName()
ပါ။
ဤဥပမာသည် ပါဝင်သည့် အစိတ်အပိုင်းအားလုံး၏စာရင်းကို ပြန်ပေးသည် class="intro"
။
ဥပမာ
const x = document.getElementsByClassName("intro");
CSS Selectors များမှ HTML Elements များကိုရှာဖွေခြင်း။
သတ်မှတ်ထားသော CSS ရွေးချယ်မှု (id၊ အတန်းအမည်များ၊ အမျိုးအစားများ၊ အရည်အချင်းများ၊ အရည်အချင်းတန်ဖိုးများ စသည်ဖြင့်) နှင့် ကိုက်ညီသော HTML အစိတ်အပိုင်းအားလုံးကို ရှာဖွေလိုပါက querySelectorAll()
နည်းလမ်းကို အသုံးပြုပါ။
<p>
ဤဥပမာသည် ပါဝင်သည့် အစိတ်အပိုင်း အားလုံး၏စာရင်းကို ပြန်ပေးသည် class="intro"
။
ဥပမာ
const x = document.querySelectorAll("p.intro");
HTML Object Collections ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
ဤဥပမာသည် ဖောင်ပုံစံဒြပ်စင်ကို id="frm1"
၊ ဖောင်များစုစည်းမှုတွင် တွေ့ရှိပြီး ဒြပ်စင်တန်ဖိုးအားလုံးကို ပြသသည်-
ဥပမာ
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
အောက်ပါ HTML အရာဝတ္ထုများ (နှင့် အရာဝတ္ထုစုဆောင်းမှုများ) ကိုလည်း ဝင်ရောက်ကြည့်ရှုနိုင်သည်-