ဂျပ်တိုးလ် ဟန်တာဒီမိုင်း အရာ

本章向您讲解如何查找和访问 HTML 页面中的 HTML 元素。

အရာဝတ္တုများ ရှာဖွေ

အများဆုံး မှာ JavaScript ဖြင့် အရာဝတ္တုများ ကို အသုံးပြု သင့်သည်

ထို အရာကို ရည်ရွယ် ရာတွင် အသုံးပြု ရန် သင် သတ်မှတ်ထားသော အရာဝတ္တုများ ကို ပထမပေါင်း ရှာဖွေ ပါ သင့်သည်။ အဆိုပါ အရာကို ပြုပြင် ရန် အမျိုးမျိုးသော ဘွတ်တို့ ရှိသည်

  • id ဖြင့် ရှာဖွေသူ အရာဝတ္တုများ
  • အချက်အလက် အမည် ဖြင့် ရှာဖွေသူ အရာဝတ္တုများ
  • CSS ရှာဖွေသူ အရာဝတ္တုများ
  • CSS ရှာဖွေသူ အရာဝတ္တုများ
  • HTML အားကူးအားရေး အဖွဲ့အစည်း ဖြင့် ရှာဖွေသူ အရာဝတ္တုများ

id ဖြင့် ရှာဖွေသူ အရာဝတ္တုများ

ဒီအရာကို ရှာဖွေ အများဆုံး ဘွတ် ဖြစ်သည့် ဒီအရာကို အသုံးပြု ပါ

ဒီ အကျိုး ကို id="intro" အဖြစ် အရှိသော အရာဝတ္တုကို ရှာဖွေ ပါ

အမှတ်

var myElement = document.getElementById("intro");

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

အရာဝတ္တု ကို ရှာဖွေရန် အခါ မှာ အရာဝတ္တု အဖြစ် အားပေးသော ဘွတ် ကို အားပေးပါ (myElement တွင်)

အရာဝတ္တု မရှာဖွေရန် အခါ မှာ myElement တွင် အရှိသည် null。

အချက်အလက် အမည် ဖြင့် ရှာဖွေသူ အရာဝတ္တုများ

ဒီ အကျိုး ကို အရာဝတ္တုများ ကို ရှာဖွေ ပါ <p> အရာဝတ္တု：

အမှတ်

var x = document.getElementsByTagName("p");

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

ဒီ အကျိုး ကို id="main" အဖြစ် အရှိသော အရာဝတ္တုကို ရှာဖွေ ပြီး "main" တွင် အရှိသော အရာဝတ္တုများ ကို ရှာဖွေ ပါ <p> အရာဝတ္တု：

အမှတ်

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

CSS ရှာဖွေသူ အရာဝတ္တုများ

သင် သတ်မှတ်ထားသော အသင်းအဖွဲ့ အရာဝတ္တုများ အား ရှာဖွေ သင့်ကြောင်း လို့ သတ်မှတ် ရာတွင် သင် သုံးနိုင်သော ဘွတ်တို့မှ တစ်ခု ဖြစ်သည့် getElementsByClassName()。

ဒီ အကျိုး ကို class="intro" အဖြစ် အရှိသော အရာဝတ္တုများ အား ပြန်လည်သတ်မှတ်ပါ အရာဝတ္တု စာရင်းကို ပြန်လည်သတ်မှတ်ပါ

အမှတ်

var x = document.getElementsByClassName("intro");

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

မိုင်တာ အင်တာနက် အက်ယ်လက်ာတ် ၈ နှင့် အနည်းဆုံး တို့ ကို မသုံးနိုင်ချေ。

CSS ရှာဖွေသူ အရာဝတ္တုများ

သင် သတ်မှတ်ထားသော CSS ရှာဖွေသူ အရာဝတ္တုများ အား ရှာဖွေ သင့်ကြောင်း လို့ သတ်မှတ် ရာတွင် သင် သုံးနိုင်သော ဘွတ်တို့မှ တစ်ခု ဖြစ်သည့် querySelectorAll() စမ်းသုံး မူကြမ်း

ဒီ အကျိုး ကို class="intro" အဖြစ် အရှိသော အရာဝတ္တုတွေ အား ပြန်လည်သတ်မှတ်ပါ <p> အရာဝတ္တု စာရင်း：

အမှတ်

var x = document.querySelectorAll("p.intro");

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

querySelectorAll() မိုင်တာ အင်တာနက် အက်ယ်လက်ာတ် ၈ နှင့် အနည်းဆုံး တို့ ကို မသုံးနိုင်ချေ。

ဟော်လစ် အရာ ကို ဟော်လစ် အရာ ကို ရှာဖွေနိုင်ပါသည်

အမှတ် အမှတ် အော်လက်ဘာ ကို id="frm1" ဖြစ်သော form အရာ ကို forms အုပ် တွင် ရှာနိုင်ပါသည်။ ထို့နောက် အရာ အားလုံး အဆက်ဆက် ပြသပါသည်：

အမှတ်

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
ဒိုင်းမို.getElementById("demo").innerHTML = text;

ကိုယ်တိုင် ကြိုးစားလုပ်ချင်

အော်လက်ဘာ အရာ (နှင့် အရာအုပ်) လည်း အားဏာ ပြုနိုင်ပါသည်：