HTML DOM Element querySelectorAll() মথদল

পরিভাষা ও ব্যবহার

querySelectorAll() পদ্ধতি নির্দিষ্ট CSS চিহ্নিতাকারকের সঙ্গে মানোন্নয়নকারী বস্তুকের সাব-বস্তুকের সংকলন ফিরায়, যা স্থির NodeList অবজেক্ট হিসাবে।

NodeList

NodeList একটি ক্যাটার ধরনের নোড সংকলন (তালিকা)।

তালিকায় নোডগুলি সূচক (ইনডেক্স) দ্বারা প্রবেশ করা যায়। সূচক 0 থেকে শুরু করে থাকে。

length বৈশিষ্ট্য একটি তালিকায় নোডের সংখ্যা ফিরায়

আরও দেখুন:

পরিচিতির হান্ডবুক:

classList বৈশিষ্ট্য

className বৈশিষ্ট্য

querySelector() পদ্ধতি

getElementsByTagName() পদ্ধতি

getElementsByClassName() পদ্ধতি

HTML DOM Style অবজেক্ট

শিক্ষা:

CSS বিষয়

CSS সিলেক্টর

CSS সিলেক্টর সংক্ষিপ্ত গাইড

ইনস্ট্যান্স

উদাহরণ 1

设置 <div> 元素中 class="example" 的第一个元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 中 class="example" 的的所有元素
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// 设置 div 中第一个 class="example" (index 0) 的元素的背景颜色
x[0].style.backgroundColor = "red";

আপনার নিজেই প্রয়াস করুন

সুঝাওয়া:পাতার নিচে আরও উদাহরণ পাবেন

পরিভাষা

ব্যবহারelementcssSelectors.querySelectorAll(

)

) বর্ণনা
cssSelectors

অপরিহার্য। স্ট্রিং। একটি বা একাধিক CSS চিহ্নিতাকারককে নির্দিষ্ট করে, যা বস্তুকে মানোন্নয়ন করে。

CSS চিহ্নিতাকারক, id, শ্রেণী, ধরন, প্রকৃতি, প্রকৃতির মান ইত্যাদির ভিত্তিতে HTML বস্তুকে চিহ্নিত করে。

একাধিক চিহ্নিতাকারকের জন্য, প্রত্যেকটি চিহ্নিতাকারককে কমা (,) দিয়ে বিভক্ত করুন。

সুঝাওয়া:সমস্ত CSS চিহ্নিতাকারকগুলির তালিকা দেখতে আমাদের CSS সিলেক্টর সংক্ষিপ্ত গাইড。

প্রযুক্তিগত বিবরণ

ফলাফল:

NodeList একটি বস্তু, যা নির্দিষ্ট CSS চিহ্নিতাকারকের সঙ্গে মানোন্নয়নকারী সমস্ত পরবর্তী বস্তুকে প্রতিনিধিত্ব করে。

NodeList একটি স্থির সংকলন, যার মানে DOM-এর পরিবর্তন সংকলনের ওপর প্রভাব ফেলে না。

মন্তব্য:যদি নির্দিষ্ট চিহ্নিতাকারক অসুবিধা হয়, তবে SYNTAX_ERR অপরাধ ফেলে দেয়
DOM সংস্করণ： Selectors Level 1 Document Object

আরও উদাহরণ

উদাহরণ 2

获取 <div> 元素内的所有 <p> 元素，并设置第一个 <p> 元素（索引 0）的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// 设置 div 中第一个 <p> 元素（索引 0）的背景颜色
x[0].style.backgroundColor = "red";

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3

获取 <div> 中的 class="example" 的所有 <p> 元素，并设置第一个 <p> 元素的背景：

// 获取 id="myDIV" 的元素（div），然后在 div 中获取所有具有 class="example" 的 p 元素
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// 设置 div 中 class="example" 的第一个 
 元素 (index 0) 的背景颜色
x[0].style.backgroundColor = "red";

আপনার নিজেই প্রয়াস করুন

例子 4

找出

元素中有多少带有 class="example" 的元素（使用 NodeList 对象的 length 属性）：

/* 获取 id="myDIV" 的元素（div），然后获取 div 内所有 class="example" 的 p 元素，返回找到的元素个数 */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

আপনার নিজেই প্রয়াস করুন

例子 5

设置

元素中 class="example" 的所有元素的背景颜色：

// 获取 id="myDIV" 的元素（ div），然后在 div 中获取所有 class="example" 的元素
var x = document.getElementById("myDIV").querySelectorAll(".example");
// 创建 for 循环并设置 div 中所有 class="example" 元素的背景色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

আপনার নিজেই প্রয়াস করুন

例子 6

设置

元素中所有

元素的背景颜色：

// 获取 id="myDIV" 的元素（div），然后获取 div 内的所有 p 个元素
var x = document.getElementById("myDIV").querySelectorAll("p");
// 创建 for 循环并设置 div 中所有 p 元素的背景颜色
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

আপনার নিজেই প্রয়াস করুন

例子 7

设置

元素中所有设置 target 属性的 元素的边框样式：

// আইডি="myDIV" এর তত্ত্বকে (div) পাওয়া আছে, এবং div-তে সব টার্গেট এট্রিবিউট সহ <a> তত্ত্বকে পাওয়া আছে
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// for সার্কুলার তৈরি করুন এবং div-এর সকল targe tএটি সম্পন্ন <a> ইলেকট্রনের বর্তর্ফল সেট করুন
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 8

সেট <div> ইলেকট্রনের সকল <h2>、<div> ও <span> ইলেকট্রনের ব্যাকগ্রাউন্ড কালার:

// id="myDIV"-এর ইলেকট্রনটি (div) পাওয়া এবং <div> এর ভিতরের সকল <h2>、<div> ও <span> ইলেকট্রনটি পাওয়া
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// for সার্কুলার তৈরি করুন এবং <div> এর সকল <h2>、<div> ও <span> ইলেকট্রনেটের ব্যাকগ্রাউন্ড কালার সেট করুন
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

আপনার নিজেই প্রয়াস করুন

ব্রাউজার সমর্থন

সারণিতে দেওয়া সংখ্যাগুলি এই পদ্ধতিকে পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে।

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

মন্তব্য:Internet Explorer 8 একসঙ্গে CSS2 সিলেক্টরগুলির সমর্থন করে। IE9 ও তার উচ্চতর সংস্করণগুলি CSS3-এরও সমর্থন করে।

সংশ্লিষ্ট পৃষ্ঠা

CSS শিক্ষাদত্তা:CSS সিলেক্টর

CSS পরিচ্ছেদবুদ্ধ হান্ডবুক:CSS সিলেক্টর সংক্ষিপ্ত গাইড

JavaScript শিক্ষাদত্তা:JavaScript HTML DOM Node List

JavaScript পরিচ্ছেদবুদ্ধ হান্ডবুক:element.querySelector()

HTML DOM পরিচ্ছেদবুদ্ধ হান্ডবুক:document.querySelectorAll()