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

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

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

အတွင်းရှိ input ကို link ရယူကြပါစို့။

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

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

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

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

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

#parent input {
	color: red;
}

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

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

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

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

အောက်ပါ HTML ကို ပေးထားသည်။

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

id သည် block နှင့် ညီမျှသော div မှ ပထမဆုံး စာပိုဒ်ကို link ရယူပါ။

အောက်ပါ HTML ကို ပေးထားသည်။

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

block class ရှိသော div မှ ပထမဆုံး စာပိုဒ်ကို link ရယူပါ။

အောက်ပါ HTML ကို ပေးထားသည်။

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

www class ရှိသော ပထမဆုံး စာပိုဒ်ကို link ရယူပါ။