HTML DOM querySelectorAll() နည်းလမ်း
❮ Element Objectဥပမာ
<div> ဒြပ်စင်တစ်ခုအတွင်း class="example" ဖြင့် ပထမဒြပ်စင်၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
querySelectorAll() method သည် static NodeList အရာဝတ္ထုတစ်ခုအနေဖြင့် သတ်မှတ်ထားသော CSS ရွေးချယ်သူ(များ)နှင့် ကိုက်ညီသော ဒြပ်စင်တစ်ခု၏ ကလေးဒြပ်စင်များစုစည်းမှုကို ပြန်ပေးသည်။
NodeList အရာဝတ္ထုသည် node အစုအဝေးကိုကိုယ်စားပြုသည်။ node များကို အညွှန်းနံပါတ်များဖြင့် ဝင်ရောက်ကြည့်ရှုနိုင်ပါသည်။ အညွှန်းကိန်းသည် 0 တွင် စတင်သည်။
အကြံပြုချက်- သင်သည် သတ်မှတ်ထားသည့် ရွေးချယ်ကိရိယာနှင့် ကိုက်ညီသည့် ကလေး node အရေအတွက်ကို ဆုံးဖြတ်ရန် NodeList object ၏ အရှည် ပိုင်ဆိုင်မှုကို သင်အသုံးပြုနိုင်ပြီး ၊ ထို့နောက် node အားလုံးကို လှည့်ပတ်ကာ သင်အလိုရှိသော အချက်အလက်ကို ထုတ်ယူနိုင်ပါသည်။
CSS Selectors များအကြောင်း နောက်ထပ်အချက်အလက်များအတွက်၊ ကျွန်ုပ်တို့၏ CSS Selectors Tutorial နှင့် ကျွန်ုပ်တို့၏ CSS Selectors Reference သို့ ဝင်ရောက်ကြည့်ရှု ပါ။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Method | |||||
---|---|---|---|---|---|
querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
မှတ်ချက်- Internet Explorer 8 တွင် CSS2 ရွေးချယ်သူများအတွက် ပံ့ပိုးမှုရှိပါသည်။ IE9 နှင့် နောက်ပိုင်းဗားရှင်းများတွင် CSS3 ကိုလည်း ထောက်ပံ့ပေးထားသည်။
အထားအသို
element.querySelectorAll(CSS selectors)
ကန့်သတ်တန်ဖိုးများ
Parameter | Type | Description |
---|---|---|
CSS selectors | String | Required. Specifies one or more CSS selectors to match the element. These are used to select HTML
elements based on their id, classes, types, attributes, values of attributes,
etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
နည်းပညာဆိုင်ရာအသေးစိတ်
DOM ဗားရှင်း- | ရွေးချယ်သူများ အဆင့် 1 စာရွက်စာတမ်း Object |
---|---|
ပြန်ပို့တန်ဖိုး- | သတ်မှတ်ထားသော CSS ရွေးချယ်မှု(များ)နှင့် ကိုက်ညီသော လက်ရှိဒြပ်စင်၏ ဆင်းသက်လာသော ဒြပ်စင်အားလုံးကို ကိုယ်စားပြုသည့် NodeList အရာဝတ္ထု။ NodeList သည် တည်ငြိမ်သောစုစည်းမှုတစ်ခုဖြစ်ပြီး၊ ဆိုလိုသည်မှာ DOM တွင်ပြောင်းလဲမှုများသည်စုစည်းမှုတွင်အကျိုးသက်ရောက်မှုမရှိပါ။ မှတ်ချက်- သတ်မှတ်ထားသော ရွေးချယ်မှု(များ) မမှန်ကန်ပါက SYNTAX_ERR ခြွင်းချက်တစ်ခုကို လွှင့်ပစ်ပါ။ |
နောက်ထပ် ဥပမာများ
ဥပမာ
<p> ဒြပ်စင်များအားလုံးကို <div> ဒြပ်စင်တစ်ခုအတွင်း ရယူပြီး ပထမ <p> ဒြပ်စင် (အညွှန်းကိန်း 0) ၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ။
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";
ဥပမာ
class="example" ဖြင့် <p> ဒြပ်စင်အားလုံးကို <div> တွင်ရယူပြီး ပထမ <p> ဒြပ်စင်၏ နောက်ခံကို သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");
// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုတွင် class="example" ပါသည့်ဒြပ်စင်မည်မျှရှိသည်ကိုရှာဖွေပါ (NodeList အရာဝတ္တု၏အရှည်ပိုင်ဆိုင်မှုကိုအသုံးပြု၍)
/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;
ဥပမာ
<div> ဒြပ်စင်တစ်ခုတွင် class="example" ဖြင့် ဒြပ်စင်အားလုံး၏ နောက်ခံအရောင်ကို သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ဥပမာ
<p> ဒြပ်စင်အားလုံး၏ နောက်ခံအရောင်ကို <div> ဒြပ်စင်တစ်ခုတွင် သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ဥပမာ
"ပစ်မှတ်" ရည်ညွှန်းချက်ပါရှိသော <a> ဒြပ်စင်အားလုံး၏ ဘောင်စတိုင်ကို သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
ဥပမာ
<h2>၊ <div> နှင့် <span> ဒြပ်စင်အားလုံး၏ နောက်ခံအရောင်ကို <div> ဒြပ်စင်တစ်ခုတွင် သတ်မှတ်ပါ-
// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS ရွေးချယ်မှု များ
CSS ရည်ညွှန်းချက်- CSS ရွေးချယ်မှု များ အကိုးအကား
JavaScript သင်ခန်းစာ- JavaScript HTML DOM Node စာရင်း
HTML DOM ရည်ညွှန်းချက်- ဒြပ်စင် .querySelector()
HTML DOM အကိုးအကား- document.querySelectorAll()
❮ Element Object