3.2.  বেসিক এবং Query সিলেক্টর্স

বেসিক সিলেক্টর্স

getElementsByTagName()

getElementsByTagName() পদ্ধতি একটি নির্দিষ্ট ট্যাগ নামের সাথে সমস্ত উপাদানের একটি সংগ্রহ প্রদান করে। getElementsByTagName() পদ্ধতি একটি HTML কালেকশন প্রদান করে। getElementsByTagName() সম্পত্তি শুধুমাত্র পঠনযোগ্য।

• <li> ট্যাগ নামের সমস্ত উপাদান পেতে:
  const collection = document.getElementsByTagName("li");

• সমস্ত উপাদান পেতে:
  const collection = document.getElementsByTagName("*");

• Document এর প্রথম উপাদানটির ভিতরের HTML পরিবর্তন করুন:
  document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

 

getElementsByClassName()

getElementsByClassName() পদ্ধতি একটি নির্দিষ্ট শ্রেণীর নাম(গুলি) সহ উপাদানগুলির একটি সংগ্রহ প্রদান করে৷ getElementsByClassName() পদ্ধতি একটি HTML কালেকশন প্রদান করে। getElementsByClassName() সম্পত্তি শুধুমাত্র পঠনযোগ্য।

• class=”example” নামের সমস্ত উপাদান পেতে:
  const collection = document.getElementsByClassName("example");

• class=”example” and class=”color” নামের সমস্ত উপাদান পেতে:
  const collection = document.getElementsByClassName("example color");

 

getElementById()

getElementById() পদ্ধতি একটি নির্দিষ্ট মান সহ একটি উপাদান প্রদান করে। যদি উপাদানটি বিদ্যমান না থাকে তবে getElementById() পদ্ধতিটি null প্রদান করে।
getElementById() পদ্ধতি হল HTML DOM-এর সবচেয়ে সাধারণ পদ্ধতিগুলির মধ্যে একটি। আপনি একটি HTML উপাদান পড়তে বা সম্পাদনা করতে চান প্রায় প্রতিবারই এটি ব্যবহার করা হয়।

• নির্দিষ্ট আইডি সহ উপাদানটি পেতে:
  document.getElementById("demo");

• নির্দিষ্ট উপাদানটি পেতে এবং এর রঙ পরিবর্তন করতে:

  const myElement = document.getElementById("demo");
  myElement.style.color = "red"

• অথবা শুধু এর রঙ পরিবর্তন করতে:
  document.getElementById("demo").style.color = "red";

 

Query সিলেক্টর্স

querySelector()

querySelector() পদ্ধতিটি প্রথম উপাদানটি প্রদান করে যা একটি CSS Selector এর সাথে মেলে। সব মিল ফেরাতে (শুধুমাত্র প্রথম নয়), পরিবর্তে querySelectorAll() ব্যবহার করুন। querySelector() এবং querySelectorAll() উভয়ই একটি NodeList প্রদান করে।

querySelector() এবং querySelectorAll() উভয়ই একটি SYNTAX_ERR নিক্ষেপ করে যদি Selector(গুলি) Invalid হয়।

• ট্যাগ নামের উপাদান পেতে:
  document.querySelector("p");

• class=”example” নামের সমস্ত উপাদান পেতে:
  document.querySelector(".example");

 

querySelectorAll()

querySelectorAll() পদ্ধতি একটি CSS Selector(গুলি) এর সাথে মেলে এমন সমস্ত উপাদান প্রদান করে। querySelectorAll() পদ্ধতি একটি NodeList প্রদান করে।

querySelectorAll() পদ্ধতিটি একটি SYNTAX_ERR নিক্ষেপ করে যদি Selector(গুলি) Invalid হয়।

• class=”example” নামের সমস্ত উপাদান পেতে:
  document.querySelectorAll(".example");

Note:

getElementsByClassName() এবং getElementsByTagName() methods একটি HTML সংগ্রহ ফেরত দেয়। আর querySelector() এবং querySelectorAll() methods একটি NodeList প্রদান করে।