HTML DOM Document querySelectorAll()
ဥပမာ
class="example" ဖြင့် အစိတ်အပိုင်းအားလုံးကို ရွေးပါ-
document.querySelectorAll(".example");
အောက်တွင် နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
querySelectorAll()
နည်းလမ်းသည် CSS ရွေးချယ်သူ(များ)နှင့် ကိုက်ညီသည့် အစိတ်အပိုင်းအားလုံးကို ပြန်ပေးသည် ။
querySelectorAll()
နည်းလမ်းသည် NodeList ကို ပြန်ပေးသည် ။
ရွေးချယ်သူ(များ) မမှန်ကန်ပါ က querySelectorAll()
နည်းလမ်းသည် SYNTAX_ERR ခြွင်းချက်တစ်ခုအား လွှင့်တင်သည်။
ကျူတိုရီရယ်များ-
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.querySelectorAll(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 က ပြန်ပေးသည်။ |
နောက်ထပ် ဥပမာများ
ပထမ <p> ဒြပ်စင်သို့ နောက်ခံအရောင်ထည့်ပါ-
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
class="example" ဖြင့် ပထမ <p> ဒြပ်စင်သို့ နောက်ခံအရောင်ထည့်ပါ-
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
class="example" ပါရှိသော ဒြပ်စင်အရေအတွက်-
let numb = document.querySelectorAll(".example").length;
class="example" ဖြင့် ဒြပ်စင်အားလုံး၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
<p> အစိတ်အပိုင်းအားလုံး၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
"ပစ်မှတ်" ရည်ညွှန်းချက်ဖြင့် <a> ဒြပ်စင်အားလုံး၏ ဘောင်ကို သတ်မှတ်ပါ-
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
ပင်မသည် <div> ဒြပ်စင်ဖြစ်သည့် <p> ဒြပ်စင်တိုင်း၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
<h3>၊ <div> နှင့် <span> ဒြပ်စင်များအားလုံး၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Browser ပံ့ပိုးမှု
document.querySelectorAll()
DOM Level 3 (2004) အင်္ဂါရပ်တစ်ခုဖြစ်သည်။
ဘရောက်ဆာအားလုံးတွင် ၎င်းကို အပြည့်အဝထောက်ခံသည်-
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |