JavaScript හි DOM මූලද්‍රව්‍ය සඳහා සංකීර්ණ තේරීම් ක්‍රම

අපි ටිකක් වැඩියෙන් සංකීර්ණ දෙයක් කරමු. උදාහරණයක් ලෙස, අපට මේ වගේ HTML කේතයක් තිබේ යැයි සිතමු:

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

#parent බ්ලොක් එක තුළ ඇති input එකට සබැඳියක් ලබා ගනිමු:

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

ඔබට පෙනෙන පරිදි, අපි අපේ input එක #parent input තේරීම් ක්‍රමයෙන් ලබාගත්තා. ඇත්තටම, මෙම CSS තේරීම් ක්‍රමයට ගැලපෙන්නේ #parent තුළ ඇති සියලුම inputවේ.

උදාහරණයක් ලෙස, අපට එවැනි input දෙකක් ඇතැයි සිතමු:

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

එවිට, CSS කේතයේ #parent input තේරීම් ක්‍රමය ලියන්නේ නම්, එය අපගේ input දෙකම බලපානු ඇත:

css#parent input {
  color: red;
}

කෙසේ වෙතත්, querySelector ක්‍රමය එලෙස ක්‍රියා නොකරයි. එය සැමවිටම තේරීම් ක්‍රමයට ගැලපෙන පළමු මූලද්‍රව්‍යය එක් එක් වරට ලබා ගනී. අපි උදාහරණයක් බලමු. අපට elem පන්තියේ input ඇතැයි සිතමු:

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

මෙම 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">text</p>
<p class="www">text</p>