HTML DOM Document querySelector() মথোদ
- পূর্ববর্তী পৃষ্ঠা open()
- পরবর্তী পৃষ্ঠা querySelectorAll()
- একত্রিভূত হওয়ার পূর্বের স্তর HTML DOM Documents
বর্ণনা ও ব্যবহার
querySelector() পদ্ধতি চিহ্নিতকারীর সাথে মানোন্নয়নকারীপ্রথমইলেকট্রন
যদি ফলাফল ইলেকট্রন ফিরিয়ে দেবেনসকলমানোন্নয়নকারী (শুধুমাত্র প্রথম মানোন্নয়নকারী নয়), querySelectorAll() ব্যবহার করুন。
যদি চিহ্নিতকারী অবৈধ হয়, তবে querySelector() এবং querySelectorAll() প্রত্যেকটি উপলব্ধি করবে SYNTAX_ERR অস্বাভাবিক
উদাহরণ
উদাহরণ 1
প্রথম <p> ইলেকট্রন পাওয়া যায়:
document.querySelector("p");
উদাহরণ 2
class="example" বৈশিষ্ট্য সম্পন্ন প্রথম ইলেকট্রন পাওয়া যায়:
document.querySelector(".example");
উদাহরণ 3
class="example" বৈশিষ্ট্য সম্পন্ন প্রথম <p> ইলেকট্রন পাওয়া যায়:
document.querySelector("p.example");
উদাহরণ 4
id="demo" বৈশিষ্ট্য সম্পন্ন ইলেকট্রনের টেক্সট পরিবর্তন করুন:
document.querySelector("#demo").innerHTML = "Hello World!";
উদাহরণ 5
প্রথম প্রথম প্রতিষ্ঠাকারী <div> ইলেকট্রনের <p> ইলেকট্রন চিহ্নিত করুন:
document.querySelector("div > p");
উদাহরণ 6
প্রথম "target" বৈশিষ্ট্য সম্পন্ন <a> ইলেকট্রন চিহ্নিত করুন:
document.querySelector("a[target]");
উদাহরণ 7
প্রথম <h3> বা প্রথম <h4> চিহ্নিত করুন:
<h3>একটি h3 ইলেকট্রন</h3>
<h4>একটি h4 ইলেকট্রন</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
উদাহরণ 8
প্রথম <h3> বা প্রথম <h4> চিহ্নিত করুন:
<h4>একটি h4 ইলেকট্রন</h4>
<h3>একটি h3 ইলেকট্রন</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
ব্যবহারকৌশল
document.querySelector(cssSelectors)
পারামিটার
| পারামিটার | বর্ণনা |
|---|---|
| cssSelectors |
অপরিহার্য। একটি বা একাধিক CSS চিহ্নিতকারী。 CSS চিহ্নিতকারী id, শ্রেণী, ধরন, বৈশিষ্ট্য, বৈশিষ্ট্যের মান ইত্যাদির ভিত্তিতে HTML ইলেকট্রন চিহ্নিত করে。 সম্পূর্ণ তালিকা পাওয়ার জন্য, আমাদের CSS সিলেক্টর রেফারেন্স ম্যানুয়েল。 বহুসংখ্যক চিহ্নিতকারীর জন্য, প্রত্যেকটি চিহ্নিতকারীকে কমা দিয়ে পৃথক করুন (পৃষ্ঠার উপরের উদাহরণ দেখুন)。 |
ফলাফল
| ধরন | বর্ণনা |
|---|---|
| অবজেক্ট |
CSS চিহ্নিতকারীর সাথে মানোন্নয়নকারী প্রথম ইলেকট্রন যদি কোনো মাটিলক্ষ্য না পাওয়া যায়, তবে null ফিরিয়ে দেয়。 |
HTMLCollection এবং NodeList-এর পার্থক্য
NodeList এবং HTMLcollection অত্যন্ত মিলিত
উভয়ই ডকুমেন্ট থেকে উদ্ধারকৃত নোড (ইলেকট্রন) এর অনুরূপ আকারবদ্ধ সংকলন (তালিকা) হয়, যা সূচক সংখ্যার মাধ্যমে পরিবর্তনকৃত হয়। সূচক সংখ্যা 0 থেকে শুরু করে থাকে。
উভয়ই এটি তালিকায় ইলেকট্রনের সংখ্যা (কলেকশন) ফিরিয়ে দেয় প্রযুক্তি
HTMLCollectionডকুমেন্ট ইলেকট্রনসংকলন
নোডলিস্টডকুমেন্ট নোড（ইলেকট্রন নোড, অ্যাট্রিবিউট নোড এবং টেক্সট নোড）সংকলন
HTMLCollection প্রযুক্তি তাদের নাম, id বা সূচক সংখ্যার মাধ্যমে পরিবর্তনকৃত হয়
নোডলিস্ট প্রযুক্তি শুধুমাত্র তাদের সূচক সংখ্যার মাধ্যমে পরিবর্তনকৃত হয়
HTMLCollection সর্বদারিয়েলসংকলন
উদাহরণ: যদি <li> ইলেকট্রন ডমেইনে তালিকায় যুক্ত করা হয়, তবে এইচটিএমএলকলেকশনের তালিকা পরিবর্তিত হবে।
নোডলিস্ট সাধারণতস্থায়ীসংকলন
উদাহরণ: যদি <li> ইলেকট্রন ডমেইনে তালিকায় যুক্ত করা হয়, তবে নোডলিস্টের তালিকা পরিবর্তিত হবে না。
getElementsByClassName() এবং getElementsByTagName() এই পদ্ধতিগুলি সবকটি রিয়েল এইচটিএমএলকলেকশন ফিরিয়ে দেয়।
querySelectorAll() এই পদ্ধতি স্থায়ী নোডলিস্ট ফিরিয়ে দেয়।
childNodes এই অবকাঠামোকে রিয়েল নোডলিস্ট ফিরিয়ে দেয়।
ব্রাউজার সমর্থন
document.querySelector() এটি DOM Level 1 (1998) বৈশিষ্ট্য।
সমস্ত ব্রাউজারগুলি এটি সমর্থন করে:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| সমর্থন | 9-11 | সমর্থন | সমর্থন | সমর্থন | সমর্থন |
সংশ্লিষ্ট পৃষ্ঠা
শিক্ষাক্রম:
CSS সিলেক্টর রেফারেন্স ম্যানুয়েল
HTML DOM NodeList রেফারেন্স ম্যানুয়েল
QuerySelector পদ্ধতি:
GetElement পদ্ধতি:
- পূর্ববর্তী পৃষ্ঠা open()
- পরবর্তী পৃষ্ঠা querySelectorAll()
- একত্রিভূত হওয়ার পূর্বের স্তর HTML DOM Documents
