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 প্রদান করে।

উদাহরন

Universal selector

Universal selector কে `*` দ্বারা চিহ্নিত করা হয় যা যেকোনো ধরনের সমস্ত উপাদানের সাথে মেলে:

নিম্নলিখিত উদাহরণ ব্যবহার করে `querySelector()` document এর প্রথম উপাদান নির্বাচন করে:

let element = document.querySelector('*');

এবং document এর সমস্ত উপাদান নির্বাচন করুন:

let elements = document.querySelectorAll('*');

Type selector

নিম্নলিখিত উদাহরণটি document এর প্রথম h1 উপাদানটি খুঁজে পায়:

let firstHeading = document.querySelector('h1');

Attribute selector

The following example finds the first element with the attribute [autoplay] with any value:

let autoplay = document.querySelector('[autoplay]');

Child combinator

`>` চাইল্ড কম্বিনেটর এমন সমস্ত elements খুঁজে পায় যা প্রথম উপাদানের সরাসরি Child:

let listItems = document.querySelectorAll('ul > li');

let listItems = document.querySelectorAll('ul.nav > li');

Pseudo-classes

`:` pseudo তাদের অবস্থার উপর ভিত্তি করে elements এর সাথে মেলে:

let listItem = document.querySelectorAll('li:nth-child(2)');

Pseudo-elements

:: document এ অন্তর্ভুক্ত নয় এমন entities represent করে৷

let links = document.querySelector('p::first-line');

এসো নিজে করি

আপনি যদি getElementByAttribute implement করতে চান, তাহলে আপনি কিভাবে এটি implement করবেন?
query selector দ্বারা আপনি কিভাবে একটি element এ ক্লাস যোগ করবেন?
একটি element অন্যটির child কিনা তা আমি কীভাবে যাচাই করতে পারি?
একটি DOM উপাদান তৈরি করার সেরা উপায় কি? innherHTML সেট করবেন নাকি createElement ব্যবহার করবেন?
createDocumentFragment কি এবং কেন আপনি এটি ব্যবহার করতে পারেন?

3.1. উইন্ডো এবং ডকুমেন্ট অবজেক্ট

3.3. getElement vs Query সিলেক্টর্স