JavaScript တွင် DOM element ၏ ရှုပ်ထွေးသော selectors များ

ပို၍ ရှုပ်ထွေးသောအရာတစ်ခုခုကို လုပ်ကြည့်ကြပါစို့။ ဥပမာအားဖြင့် ကျွန်ုပ်တို့တွင် ဤသို့သော HTML code ရှိသည်ဆိုပါစို့။

html<div id="parent">
  <input>
</div>

javascriptlet elem = document.querySelector('#parent input');
console.log(elem);

မြင်တွေ့ရသည့်အတိုင်း #parent input selector ဖြင့် ကျွန်ုပ်တို့၏ input ကို ရရှိခဲ့သည်။ တကယ်တော့ ဤ CSS selector သည် #parent အတွင်းရှိ input အားလုံးကို ရွေးချယ်ပေးသည်။

ဥပမာအားဖြင့် ကျွန်ုပ်တို့တွင် ထိုကဲ့သို့သော input နှစ်ခုရှိသည်ဆိုပါစို့။

html<div id="parent">
  <input value="1">
  <input value="2">
</div>

ထိုအခါ #parent input selector ကို CSS code တွင်ရေးလျှင် ကျွန်ုပ်တို့၏ input နှစ်ခုလုံးကို သက်ရောက်မည်ဖြစ်သည်။

css#parent input {
  color: red;
}

သို့သော် querySelector method သည် ထိုသို့မဟုတ်ပါ။ ၎င်းသည် ရွေးချယ်ထားသော selector နှင့် ကိုက်ညီသည့် ပထမဆုံး element တစ်ခုကိုသာ အမြဲတမ်း ရရှိသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ elem class ရှိ input များ ကျွန်ုပ်တို့တွင် ရှိသည်ဆိုပါစို့။

html<input class="elem">
<input class="elem">

ထို input များအနက် ပထမဆုံးသော input ကို ရယူကြပါစို့။

javascriptlet elem = document.querySelector('.elem');
console.log(elem); // ဤနေရာတွင် ပထမဆုံး input ဖြစ်လိမ့်မည်

html<div id="block">
  <p>1</p>
  <p>2</p>
</div>

html<div class="block">
  <p>1</p>
  <p>2</p>
</div>

html<p class="www">စာသား</p>
<p class="www">စာသား</p>