سبد (0)

متد document.querySelectorAll

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

به دست آوردن تمام عناصر درون سند با کلاس example:

var x = document.querySelectorAll(".example");

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

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

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

متد querySelectorAll() تمام عناصر درون سند را که با یک سلکتور css مشخص تطابق دارند، مانند یک شیء NodeList برمی گرداند.

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

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

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

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

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

متد     
querySelectorAll() 4.0 9.0 3.5 3.2 10.0

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

نحوه استفاده

document.querySelectorAll(CSS selectors)

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

پارامترTypeتوضیحات
CSS selectors String

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

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

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

DOM Version: Selectors Level 1 کلیه توابع و خصوصیت های شیء Document در JavaScript
مقدار برگشتی

یک شیء NodeList که مشخص کننده ی تمام عناصر درون سند می باشد که با یک یا چند سلکتور css تطابق دارند.شیء NodeList یک مجموعه ی استاتیک می باشد و بدین معنی است که تغییرات درون DOM تاثیری در مجموعه ندارد.

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

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

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

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

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

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

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

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

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

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

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

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

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

فهمیدن اینکه چه تعداد عنصر با کلاس example در سند وجود دارند(با استفاده از خصوصیت length از شیء NodeList):

var x = document.querySelectorAll(".example").length;

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

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

ست کردن رنگ پس زمینه ی تمام عناصر درون سند، با کلاس example:

var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

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

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

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

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

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

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

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

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}

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

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

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

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

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

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

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

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

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

آموزش های مرتبط

CSS Tutorial: CSS Selectors

CSS Reference: CSS Selectors Reference

آموزش جاوا اسکریبت: JavaScript HTML DOM Node List

HTML DOM Reference: document.querySelector()

HTML DOM Reference: element.querySelectorAll()

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

نوشته شده توسط احسان عباسی
بازدید: 7855

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه