متد element.querySelectorAll

مثال (متد element.querySelectorAll)

تغییر دادن رنگ پس زمینه از اولین عنصر با کلاس example که درون یک عنصر <div> قرار دارد:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

متد ()querySelectorAll یک مجموعه از عناصر فرزند که با یک یا چند سلکتور سی اس اس تطابق دارند را بعنوان یک شیء استاتیک NodeList برمی گرداند.

شیء NodeList یک مجموعه از گره ها را دربر دارد. این گره ها می توانند به وسیله ی اندیس ها، مورد دسترسی قرار بگیرند. اندیس اول نیز 0 می باشد.

نکته: شما می توانید از ویژگی length برای دستیابی به تعداد عناصر فرزندی که توسط سلکتور مورد تطابق قرار گرفته اند استفاده کنید. سپس می توانید بر روی گره ها یک حلقه ایجاد کنید تا بتوانید اطلاعات مورد نظر خود را استخراج کنید.

برای اطلاعات بیشتر در مورد سلکتورهای css می توانید مقالاتCSS Selectors Tutorial و CSS Selectors Referenceرا مطالعه نمایید.

پشتیبانی مرورگرها

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.

متد
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

نکته: اینترنت اکسپلورر8 سلکتورهای css2 را پشتیبانی می کند. IE9 و ورژن های بعدی آن به خوبی css3 را پشتیبانی می کند.

نحوه استفاده

element.querySelectorAll(CSS selectors)

مقادیر پارامترها

پارامتر	Type	توضیحات
CSS selectors	String	ضروری. یک یا چند سلکتور css برای تطابق با عنصر مورد نظر . از اینها برای گرفتن عناصر HTML بر اساس id یا class یا نوع، یا خصوصیت یا مقایر خصوصیت ها و ... استفاده می شود. برای ایجاد سلکتورهای چندگانه، هر سلکتور را با کاما از یکدیگر جدا کنید. نکته: برای پیدا کردن یک لیست از تمام سلکتورهای css می توانید مقاله ی CSS Selectors Reference را مطالعه نمایید.

پارامتر

Type

توضیحات

CSS selectors

String

ضروری. یک یا چند سلکتور css برای تطابق با عنصر مورد نظر . از اینها برای گرفتن عناصر HTML بر اساس id یا class یا نوع، یا خصوصیت یا مقایر خصوصیت ها و ... استفاده می شود.

برای ایجاد سلکتورهای چندگانه، هر سلکتور را با کاما از یکدیگر جدا کنید.
نکته: برای پیدا کردن یک لیست از تمام سلکتورهای css می توانید مقاله ی CSS Selectors Reference را مطالعه نمایید.

جزئیات تکنیکی

DOM Version:	Selectors Level 1 کلیه توابع و خصوصیت های شیء Document در JavaScript
مقدار برگشتی	یک شیء NodeList که مشخص کننده ی تمام تمام عناصر فرزند از عنصر جاری می باشد که که با یک سلکتور یا سلکتورهای مشخص مورد تطابق قرار گرفته است.شیء Nodelist یک مجموعه ی استاتیک می باشد . نکته: در صورتی که سلکتور مورد نظر معتبر نباشد، خطای SYNTAX_ERR روی خواهد داد.

DOM Version:

Selectors Level 1 کلیه توابع و خصوصیت های شیء Document در JavaScript

مقدار برگشتی

یک شیء NodeList که مشخص کننده ی تمام تمام عناصر فرزند از عنصر جاری می باشد که که با یک سلکتور یا سلکتورهای مشخص مورد تطابق قرار گرفته است.شیء Nodelist یک مجموعه ی استاتیک می باشد .

نکته: در صورتی که سلکتور مورد نظر معتبر نباشد، خطای SYNTAX_ERR روی خواهد داد.

مثال - خودتان امتحان کنید

مثال (متد element.querySelectorAll)

به دست آوردن تمام عناصر <p> درون یک عنصر <div> و ست کردن رنگ پس زمینه ی اولین عنصر <p>(اندیس 0):

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

به دست آوردن تمام عناصر <p> در یک عنصر <div> با کلاس example و ست کردن رنگ پس زمینه ی اولین عنصر <p>:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

فهمیدن اینکه چه تعداد عنصر با کلاس example در یک عنصر <div> قرار دارند( با به کار بردن ویژگی length بر روی شیء NodeList):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

ست کردن رنگ پس زمینه ی تمام عناصر با کلاس example در یک عنصر <div>:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

ست کردن رنگ پس زمینه ی تمام عناصر <p> در یک عنصر <div>:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

ست کردن border از تمام عناصر <a> که در یک عنصر <div> قرار دارند و دارای یک خصوصیت target می باشند:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}

خودتان امتحان کنید »

مثال (متد element.querySelectorAll)

ست کردن رنگ پس زمینه ی تمام عناصر <h2> و <div> و <span> در یک عنصر <div>:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

خودتان امتحان کنید »