HTML DOM Document querySelector()
ဥပမာများ
ပထမဆုံး <p> ဒြပ်စင်ကို ရယူပါ-
document.querySelector("p");
class="example" ဖြင့် ပထမဒြပ်စင်ကို ရယူပါ
document.querySelector(".example");
အောက်တွင် နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
နည်းလမ်းသည် CSS ရွေးချယ်သည့်ကိရိယာနှင့် ကိုက်ညီသည့် ပထမquerySelector()
ဒြပ်စင်ကို ပြန်ပေးသည် ။
ကိုက်ညီမှု အားလုံးကို (ပထမတစ်ခုတည်းသာမက) ပြန်ရရန် ယင်း querySelectorAll()
အစားကို အသုံးပြုပါ။
နှစ်ခုလုံး querySelector()
နှင့် NodeListquerySelectorAll()
ကိုပြန်ပေးပါ ။
ရွေးချယ်သူ(များ) မမှန်ကန်ပါက SYNTAX_ERR ခြွင်းချက်တစ်ခုအား နှစ်ခုလုံး querySelector()
ပစ် ပါ။querySelectorAll()
ကျူတိုရီရယ်များ-
JavaScript Node စာရင်း ကျူတိုရီရယ်
QuerySelector Methods
Element querySelector() Method
Element querySelectorAll() Method
Document querySelector() နည်းလမ်း
Document querySelectorAll() Method
GetElement နည်းလမ်းများ-
စာရွက်စာတမ်း getElementById() နည်းလမ်း
HTML DOM NodeList / HTMLCollection
HTMLCollection နှင့် NodeList အကြား ကွာခြားချက်များ
NodeList နှင့် HTMLCollection နှစ်ခုစလုံးသည် စာရွက်စာတမ်း တစ်ခုမှ ထုတ်နုတ်ထားသော node (ဒြပ်စင်များ) ၏ array-like collections (lists) များဖြစ်သည်။ node များကို အညွှန်းနံပါတ်များဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။ အညွှန်းကိန်းသည် 0 တွင် စတင်သည်။
အရာဝတ္ထုနှစ်ခုစလုံး သည် စာရင်းရှိဒြပ်စင်အရေအတွက်ကို ပြန်ပေး သည့် အရှည် ပိုင်ဆိုင်မှုတစ်ခုရှိသည်။
HTMLCollection သည် တိုက်ရိုက်စုစည်းမှုတစ်ခုဖြစ်သည် - အကယ်၍ သင်သည် DOM တွင်စာရင်းတစ်ခုသို့ <li> ဒြပ်စင်တစ်ခုကို ထည့်ပါက၊ HTMLCollection ရှိ စာရင်းသည်လည်း ပြောင်းလဲသွားမည်ဖြစ်သည်။
NodeList သည် ပုံသဏ္ဍာန် စုစည်းမှုတစ်ခုဖြစ်သည် - အကယ်၍ သင်သည် DOM တွင်စာရင်းတစ်ခုသို့ <li> ဒြပ်စင်တစ်ခုကိုထည့်ပါက၊ NodeList ရှိစာရင်းသည် ပြောင်းလဲမည်မဟုတ်ပါ။
getElementsByClassName()
နှင့် နည်းလမ်းများ သည် getElementsByTagName()
HTMLCollection ကို ပြန်ပေးသည်။
querySelector()
နှင့် နည်းလမ်းများ သည် querySelectorAll()
NodeList ကို ပြန်ပေးသည်။
အထားအသို
document.querySelector(CSS selectors)
ကန့်သတ်ချက်များ
Parameter | Description |
CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
တန်ဖိုးကို ပြန်ပေးသည်။
ရိုက်ပါ။ | ဖော်ပြချက် |
အရာဝတ္ထု | CSS ရွေးချယ်မှု(များ) နှင့် ကိုက်ညီသော ပထမဒြပ်စင် ပါရှိသော NodeList ။ တိုက်ဆိုင်မှုမတွေ့ပါ null က ပြန်ပေးသည်။ |
နောက်ထပ် ဥပမာများ
class="example" ဖြင့် ပထမဆုံး <p> ဒြပ်စင်ကို ရယူပါ
document.querySelector("p.example");
id="demo" ဖြင့် element ၏စာသားကိုပြောင်းပါ-
document.querySelector("#demo").innerHTML = "Hello World!";
မိဘနှင့်အတူ ပထမ <p> ဒြပ်စင်ကို ရွေးပါ <div> ဒြပ်စင်တစ်ခုဖြစ်သည်။
document.querySelector("div > p");
"ပစ်မှတ်" ရည်ညွှန်းချက်ပါရှိသော ပထမဆုံး <a> ဒြပ်စင်ကို ရွေးပါ-
document.querySelector("a[target]");
ပထမ <h3> သို့မဟုတ် ပထမ <h4> ကို ရွေးပါ-
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
ပထမ <h3> သို့မဟုတ် ပထမ <h4> ကို ရွေးပါ-
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Browser ပံ့ပိုးမှု
document.querySelector()
DOM Level 1 (1998) အင်္ဂါရပ်တစ်ခုဖြစ်သည်။
ဘရောက်ဆာအားလုံးတွင် ၎င်းကို အပြည့်အဝထောက်ခံသည်-
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |