সহায়তা কোডউৎসকোম কম
- 前のページ
- 次のページ
- 上一層に戻る এইচটিএমএল ডম এলিমেন্ট কোয়ার্সি অল মথড
বিবরণ ও ব্যবহার
querySelectorAll() মথডস সিএসএস সিলেক্টরের সাথে ম্যাচকৃত সকল এলিমেন্ট ফেলাবে:
querySelectorAll() মথডস নোডলিস্ট ফেলাবে:
যদি সিলেক্টর অবৈধ হয়: querySelectorAll() মথডস ফাংশন ফেলাবে: SYNTAX_ERR অস্বাভাবিক হল:
ইনস্ট্যান্স
উদাহরণ 1
সকল class="example" এলিমেন্ট নির্বাচন করুন:
document.querySelectorAll(".example");
উদাহরণ 2
প্রথম <p> এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার যোগ করুন:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
উদাহরণ 3
প্রথম class="example" <p> এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার যোগ করুন:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
উদাহরণ 4
class="example" এলিমেন্টের সংখ্যা:
let numb = document.querySelectorAll(".example").length;
উদাহরণ 5
সকল class="example" এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করুন:
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
উদাহরণ 6
সমস্ত <p> উপাদানগুলির পিছনদিক রঙ সংযোজন করুন:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
উদাহরণ 7
প্রত্যেক ব্যবহৃত "target" অপার্টির <a> উপাদানগুলির হোল সংযোজন করুন:
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
উদাহরণ 8
পিতৃতলকা <div> উপাদানগুলির প্রত্যেক <p> উপাদানগুলির পিছনদিক রঙ সংযোজন করুন:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
উদাহরণ 9
সমস্ত <h3>、<div> এবং <span> উপাদানগুলির পিছনদিক রঙ সংযোজন করুন:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
সংজ্ঞা
document.querySelectorAll(CSSselectors)
পারামিটার
| পারামিটার | বর্ণনা |
|---|---|
| CSSselectors |
প্রয়োজনীয়। একটি বা একাধিক CSS selectors。 CSS selectors হল যেমন id, class, ধরন, অপার্টি, অপার্টি মান আদি দ্বারা HTML উপাদানগুলি চিহ্নিত করে。 সম্পূর্ণ তালিকা পাওয়ার জন্য, আমাদের এইচটিএল ডম ডকুমেন্ট কোয়ার্সির মথড。 একাধিক চিহ্নিতকারীর জন্য, প্রত্যেকটি চিহ্নিতকারীকে কমা (কমা) দ্বারা বিভক্ত করুন (দেখুন উপরের উদাহরণ)。 |
ফলাফল
| ধরন | বর্ণনা |
|---|---|
| অবজেক্ট |
একটি NodeList অবজেক্ট, যা CSS চিহ্নিতকারী উপাদানগুলি ধারণ করে。 যদি মিলন না হয়, তবে খালি NodeList অবজেক্ট ফিরিয়ে দেয়。 |
HTMLCollection এবং NodeList-এর পার্থক্য
NodeList および HTMLcollection খুবই সমান
উভয়ই ডকুমেন্ট থেকে উপাদান (এলিমেন্ট) পুনরায় উৎপাদিত সমানভাবে ক্রমবর্ধমান সংগ্রহ (তালিকা)। এগুলির নিচে সূচক সংখ্যা (ইনডেক্স) দ্বারা অপেক্ষা করা যায়। সূচক সংখ্যা 0 থেকে শুরু হয়。
উভয়ই length একটি প্রক্রিয়া, যা তালিকা (সংকেত) এর মধ্যে উপাদানগুলির সংখ্যা ফিরিয়ে দেয়。
HTMLCollection হলドキュメント要素のセット。
NodeListはドキュメントノード（要素ノード、属性ノード、テキストノード）のセット。
HTMLCollectionの項目は名前、id、またはインデックス番号を通じてアクセスできます。
NodeListの項目はそのインデックス番号を通じてのみアクセスできます。
HTMLCollectionは常にリアルタイムのセット。
例えば：<li>要素がDOM内のリストに追加された場合、HTMLCollectionのリストも変更されます。
NodeListは通常静的のセット。
例えば：<li>要素がDOM内のリストに追加された場合、NodeListのリストは変更されません。
getElementsByClassName() および getElementsByTagName() メソッドはすべてリアルタイム HTMLCollection を返します。
querySelectorAll() メソッドは静的な NodeList を返します。
childNodes 属性はリアルタイム NodeList を返します。
ブラウザサポート
document.querySelectorAll() DOM レベル 3 (2004) 特徴です。
すべてのブラウザがサポートしています：
| クローム | IE | エッジ | ファイアフォックス | サファリ | オペラ |
|---|---|---|---|---|---|
| クローム | IE | エッジ | ファイアフォックス | サファリ | オペラ |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
関連ページ
チュートリアル：
এইচটিএল ডম ডকুমেন্ট কোয়ার্সি অল মথড
এইচটিএল ডম ডকুমেন্ট কোয়ার্সির মথড
QuerySelector メソッド：
Element querySelectorAll() メソッド
Document querySelectorAll() メソッド
GetElement メソッド：
Document getElementById() メソッド
- 前のページ
- 次のページ
- 上一層に戻る এইচটিএমএল ডম এলিমেন্ট কোয়ার্সি অল মথড
