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

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

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

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

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

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

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

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

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

css#parent input {
  color: red;
}

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

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

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

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

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>