জাভাস্ক্রিপ্টে DOM এলিমেন্টের জটিল সিলেক্টর

চলুন কিছু আরও জটিল করি। উদাহরণস্বরূপ, আমাদের কাছে এইচটিএমএল কোড আছে এমন:

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

চলুন ব্লক #parent-এর ভিতরে থাকা ইনপুটটির রেফারেন্স পাই:

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

আপনি যেমন দেখছেন, আমরা আমাদের ইনপুটটি সিলেক্টর #parent input দ্বারা পেয়েছি। আসলে, এই সিএসএস সিলেক্টরের আওতায় #parent-এর মধ্যে থাকা সমস্ত ইনপুট পড়ে।

উদাহরণস্বরূপ, আমাদের কাছে দুটি এমন ইনপুট আছে:

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

তাহলে, যদি সিএসএস কোডে #parent input সিলেক্টর লেখা হয়, এটি আমাদের উভয় ইনপুটকেই প্রভাবিত করবে:

#parent input {
	color: red;
}

যাইহোক, querySelector পদ্ধতিটি এভাবে কাজ করে না। এটি সর্বদা শুধুমাত্র একটি এলিমেন্ট পায় - প্রথমটি, যা নির্দিষ্ট সিলেক্টরের আওতায় পড়ে। চলুন একটি উদাহরণে দেখি। আমাদের কাছে elem ক্লাস সহ ইনপুট আছে:

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

চলুন এই ইনপুটগুলির প্রথমটি পাই:

let elem = document.querySelector('.elem');
console.log(elem); // এখানে প্রথম ইনপুটটি থাকবে

নিম্নলিখিত এইচটিএমএল দেওয়া আছে:

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

id সমান block সহ div থেকে প্রথম অনুচ্ছেদের রেফারেন্স পান।

নিম্নলিখিত এইচটিএমএল দেওয়া আছে:

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

block ক্লাস সহ div থেকে প্রথম অনুচ্ছেদের রেফারেন্স পান।

নিম্নলিখিত এইচটিএমএল দেওয়া আছে:

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

www ক্লাস সহ প্রথম অনুচ্ছেদের রেফারেন্স পান।