HTML DOM querySelector() နည်းလမ်း
❮ Element Objectဥပမာ
<div> ဒြပ်စင်တစ်ခုတွင် class="example" ဖြင့် ပထမကလေးဒြပ်စင်၏ စာသားကို ပြောင်းပါ-
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
querySelector() နည်းလမ်းသည် ဒြပ်စင်တစ်ခု၏ သတ်မှတ်ထားသော CSS ရွေးချယ်မှု(များ) နှင့် ကိုက်ညီသော ပထမဆုံး ကလေးဒြပ်စင်ကို ပြန်ပေးသည်။
မှတ်ချက် ။ ကိုက်ညီမှုအားလုံးကို ပြန်ပေးရန်အတွက်၊ ၎င်း အစား querySelectorAll() နည်းလမ်းကို အသုံးပြုပါ။
CSS Selectors များအကြောင်း နောက်ထပ်အချက်အလက်များအတွက်၊ ကျွန်ုပ်တို့၏ CSS Selectors Tutorial နှင့် ကျွန်ုပ်တို့၏ CSS Selectors Reference သို့ ဝင်ရောက်ကြည့်ရှု ပါ။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် နည်းလမ်းကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
Method | |||||
---|---|---|---|---|---|
querySelector() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 |
အထားအသို
element.querySelector(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. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference. |
နည်းပညာဆိုင်ရာအသေးစိတ်
DOM ဗားရှင်း- | Selectors Level 1 Element Object |
---|---|
ပြန်ပို့တန်ဖိုး- | သတ်မှတ်ထားသော CSS ရွေးချယ်မှု(များ)နှင့် ကိုက်ညီသော ပထမဒြပ်စင်။ ကိုက်ညီမှုမတွေ့ပါက null ပြန်ပေးသည်။ သတ်မှတ်ထားသော ရွေးချယ်မှု(များ) မမှန်ကန်ပါက SYNTAX_ERR ခြွင်းချက်တစ်ခုကို လွှင့်ပစ်ပါ။ |
နောက်ထပ် ဥပမာများ
ဥပမာ
<p> ဒြပ်စင်၏ စာသားကို <div> ဒြပ်စင်တစ်ခုတွင် ပြောင်းပါ-
var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုတွင် class="example" ဖြင့် ပထမ <p> ဒြပ်စင်၏ စာသားကို ပြောင်းပါ-
var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုတွင် id="demo" ဖြင့် ဒြပ်စင်တစ်ခု၏ စာသားကို ပြောင်းပါ-
var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";
ဥပမာ
<div> ဒြပ်စင်တစ်ခုအတွင်း ပစ်မှတ်ရည်ညွှန်းချက်ပါရှိသော ပထမ <a> ဒြပ်စင်သို့ အနီရောင်ဘောင်ကို ထည့်ပါ-
var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";
ဥပမာ
ဤဥပမာသည် ရွေးချယ်မှုအများအပြားလုပ်ဆောင်ပုံကို သရုပ်ပြသည်။
သင့်တွင် ဒြပ်စင်နှစ်ခုရှိသည်- <h2> နှင့် <h3> ဒြပ်စင်တစ်ခုဟု ယူဆပါ။
အောက်ပါကုဒ်သည် <div> ရှိ ပထမ <h2> ဒြပ်စင်သို့ နောက်ခံအရောင်ကို ပေါင်းထည့်ပါမည်-
<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
သို့သော်၊ <h3> ဒြပ်စင်ကို <h2> ဒြပ်စင်ရှေ့တွင် ထားရှိပါက <div>။ <h3> element သည် အနီရောင် နောက်ခံအရောင်ကို ရရှိစေမည့် အရာဖြစ်သည်။
<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS ရွေးချယ်မှု များ
CSS ရည်ညွှန်းချက်- CSS ရွေးချယ်မှု များ အကိုးအကား
JavaScript သင်ခန်းစာ- JavaScript HTML DOM Node စာရင်း
JavaScript အကိုးအကား- document.querySelector()
JavaScript ရည်ညွှန်းချက်- ဒြပ်စင် .querySelectorAll()
HTML DOM အကိုးအကား- document.querySelectorAll()
❮ Element Object