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

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

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

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

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

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

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

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

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

#parent input {
	color: red;
}

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

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

මෙම input වලින් පළමු එක ලබා ගනිමු:

let elem = document.querySelector('.elem');
console.log(elem); // පළමු input එක මෙහි ඇත

පහත HTML කේතය ලබා දී ඇත:

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

id අගය block වන div එකෙන් පළමු ඡේදයට සබැඳිය ලබා ගන්න.

පහත HTML කේතය ලබා දී ඇත:

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

block පන්තියේ div එකෙන් පළමු ඡේදයට සබැඳිය ලබා ගන්න.

පහත HTML කේතය ලබා දී ඇත:

<p class="www">text</p>
<p class="www">text</p>

www පන්තියේ පළමු ඡේදයට සබැඳිය ලබා ගන්න.