HTML DOM ဆိုတာဘာလဲ။
HTML DOM သည် HTML အတွက် Object Model တစ်ခုဖြစ်သည် ။ ၎င်းသည်-
- အရာဝတ္ထု များအဖြစ် HTML အစိတ်အပိုင်းများ
- HTML ဒြပ်စင်အားလုံးအတွက် ဂုဏ်သတ္တိများ
- HTML အစိတ်အပိုင်းအားလုံးအတွက် နည်းလမ်းများ
- HTML အစိတ်အပိုင်းအားလုံးအတွက် ပွဲများ
HTML DOM သည် JavaScript အတွက် API (Programming Interface) ဖြစ်သည် ။
- JavaScript သည် HTML အစိတ်အပိုင်းများကို ထည့်/ပြောင်း/ဖယ်ရှားနိုင်သည်။
- JavaScript သည် HTML ရည်ညွှန်းချက်များကို ထည့်/ပြောင်း/ဖယ်ရှားနိုင်သည်။
- JavaScript သည် CSS ပုံစံများကို ထည့်/ပြောင်း/ဖယ်ရှားနိုင်သည်။
- JavaScript သည် HTML ဖြစ်ရပ်များကို တုံ့ပြန်နိုင်သည်။
- JavaScript သည် HTML အစီအစဉ်များကို ထည့်သွင်း/ပြောင်းလဲ/ဖယ်ရှားနိုင်သည်။
HTML DOM (Document Object Model)
ဝဘ်စာမျက်နှာကို တင်သည့်အခါ၊ ဘရောက်ဆာသည် စာမျက်နှာ၏ D ocument O bject M odel တစ်ခုကို ဖန်တီးသည်။
HTML DOM မော်ဒယ် ကို Objects သစ်ပင်အဖြစ် တည်ဆောက်ထားသည် ။
HTML DOM အရာဝတ္ထုများ၏သစ်ပင်
HTML Elements များကို ရှာဖွေခြင်း။
HTML ဒြပ်စင်များကို JavaScript ဖြင့်ဝင်ရောက်လိုသောအခါ၊ သင်သည် element များကို ဦးစွာရှာဖွေရန်လိုသည်။
ဤသို့ပြုလုပ်ရန် နည်းလမ်းနှစ်သွယ်ရှိပါသည်။
- id ဖြင့် HTML အစိတ်အပိုင်းများကိုရှာဖွေခြင်း။
- Tag အမည်ဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- အတန်းအမည်ဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- CSS ရွေးချယ်မှုများဖြင့် HTML အစိတ်အပိုင်းများကို ရှာဖွေခြင်း။
- HTML အရာဝတ္ထုစုဆောင်းမှုများအားဖြင့် HTML အစိတ်အပိုင်းများကိုရှာဖွေခြင်း။
id ဖြင့် HTML Element ကိုရှာဖွေခြင်း။
DOM တွင် HTML ဒြပ်စင်တစ်ခုကိုရှာရန် အလွယ်ဆုံးနည်းလမ်းမှာ element id ကိုအသုံးပြုခြင်းဖြစ်သည်။
ဤဥပမာသည် id="intro" ဖြင့် အစိတ်အပိုင်းကို ရှာသည်-
ဥပမာ
var myElement = document.getElementById("intro");
ဒြပ်စင်ကိုတွေ့ရှိပါက နည်းလမ်းသည် ဒြပ်စင်အား အရာဝတ္ထု (myElement တွင်) အဖြစ် ပြန်ပေးမည်ဖြစ်သည်။
ဒြပ်စင်ကို ရှာမတွေ့ပါက၊ myElement သည် null ပါဝင်မည်ဖြစ်သည်။
Tag Name ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
ဤဥပမာသည် <p> ဒြပ်စင်အားလုံးကို တွေ့ရှိသည်-
ဥပမာ
var x = document.getElementsByTagName("p");
ဤဥပမာသည် id="main" ဖြင့် ဒြပ်စင်ကို ရှာတွေ့ပြီးနောက် "main" အတွင်းရှိ <p> အစိတ်အပိုင်းအားလုံးကို ရှာသည်-
ဥပမာ
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Class Name ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
တူညီသောအတန်းအမည်ဖြင့် HTML အစိတ်အပိုင်းအားလုံးကို ရှာဖွေလိုပါက getElementsByClassName() ကို အသုံးပြုပါ။
ဤဥပမာသည် class="intro" ဖြင့် အစိတ်အပိုင်းအားလုံး၏စာရင်းကို ပြန်ပေးသည်။
ဥပမာ
var x = document.getElementsByClassName("intro");
အတန်းအမည်ဖြင့် အစိတ်အပိုင်းများကို ရှာဖွေခြင်းသည် Internet Explorer 8 နှင့် အစောပိုင်းဗားရှင်းများတွင် အလုပ်မလုပ်ပါ။
CSS Selectors များမှ HTML Elements များကိုရှာဖွေခြင်း။
သတ်မှတ်ထားသော CSS ရွေးချယ်မှု (id၊ အတန်းအမည်များ၊ အမျိုးအစားများ၊ အရည်အချင်းများ၊ အရည်အချင်းတန်ဖိုးများ စသည်ဖြင့်) နှင့် ကိုက်ညီသော HTML အစိတ်အပိုင်းအားလုံးကို ရှာဖွေလိုပါက querySelectorAll() နည်းလမ်းကို အသုံးပြုပါ။
ဤဥပမာသည် class="intro" ဖြင့် <p> အစိတ်အပိုင်းအားလုံး၏စာရင်းကို ပြန်ပေးသည်။
ဥပမာ
var x = document.querySelectorAll("p.intro");
querySelectorAll() နည်းလမ်းသည် Internet Explorer 8 နှင့် အစောပိုင်းဗားရှင်းများတွင် အလုပ်မလုပ်ပါ။
HTML Object Collections ဖြင့် HTML Elements များကို ရှာဖွေခြင်း။
HTML အရာဝတ္ထုစုဆောင်းမှုများကိုလည်း ဝင်ရောက်ကြည့်ရှုနိုင်သည်-
HTML DOM ကျူတိုရီရယ်
HTMLDOM ကျူတိုရီရယ်အပြည့်အစုံ
ဤသည်မှာ HTMLDOM အတွက် အတိုချုံး မိတ်ဆက်ခြင်းဖြစ်ပါသည်။
HTMLDOM သင်ခန်းစာအပြည့်အစုံအတွက် W3Schools HTMLDOM Tutorial သို့သွားပါ ။