مетод querySelectorAll() از DOM Element HTML

تعریف و استفاده

querySelectorAll() این روش مجموعه‌ای از فرزندان عناصر که با انتخاب‌گر CSS مشخص شده تطبیق دارند را به عنوان NodeList ثابت بازمی‌گرداند.

NodeList

NodeList یک مجموعه نودهای نوع آرایه است (لیست).

گره‌های موجود در لیست می‌توانند از طریق شاخص (پایه) دسترسی پیدا شوند. شاخص از 0 شروع می‌شود.

ویژگی length می‌تواند تعداد گره‌های موجود در لیست را بازگرداند.

مراجعه کنید

لطفاً به

دستورالعمل‌های مرجع:

ویژگی classList

ویژگی className

مетод querySelector()

مетод getElementsByTagName()

اجزای Style HTML DOM

مетод getElementsByClassName()

زبان CSS

انتخاب‌کننده‌های CSS

دستورالعمل انتخاب‌کننده‌های CSS

تدریس:

مثال

مثال 1

تنظیم رنگ پس‌زمینه اولین عناصر class="example" در عناصر <div>:
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// عناصر با id="myDIV" را دریافت کنید (div)، سپس تمام عناصر class="example" در div را دریافت کنید
x[0].style.backgroundColor = "red";

آزمایش کنید

توضیحات:// تنظیم رنگ پس‌زمینه اولین عناصر class="example" در div (شاخص 0)

مثال‌های بیشتری در پایین صفحه موجود است.

دستور زبانelementcssSelectors.querySelectorAll(

)

) توضیحات
cssSelectors

ضروری. رشته. مشخص می‌کند یک یا چند انتخاب‌گر CSS برای تطبیق عناصر.

انتخاب‌گرهای CSS برای انتخاب عناصر HTML بر اساس id، class، نوع، ویژگی، مقدار ویژگی و غیره استفاده می‌شوند.

برای انتخاب‌گرهای چندگانه، هر انتخاب‌گر را با کاما جدا کنید.

توضیحات:برای لیست تمام انتخاب‌گرهای CSS، لطفاً به دستورالعمل انتخاب‌کننده‌های CSS.

جزئیات فنی

مقدار بازگشتی:

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

NodeList یک مجموعه ثابت است، یعنی تغییرات در DOM بر روی مجموعه تأثیری ندارد.

توجه:اگر انتخاب‌گر مشخص شده معتبر نباشد، خطای SYNTAX_ERR پرتاب می‌شود
نسخه DOM: دокумент Level 1 Document Object Selectors

مثال‌های بیشتر

مثال 2

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

// وصول به عنصر div با id="myDIV" (div) و سپس دریافت همه عناصر p در div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// تنظیم رنگ پس‌زمینه اولین عناصر <p> در div (شاخص 0)
x[0].style.backgroundColor = "red";

آزمایش کنید

مثال 3

دسترسی به تمام عناصر <p> با استفاده از class="example" در <div> و تنظیم رنگ پس‌زمینه اولین <p>:

// وصول به عنصر div با id="myDIV" (div) و سپس دریافت همه عناصر p با class="example" در div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// تنظیم رنگ پس‌زمینه اولین عنصر p با class="example" در div (index 0)
x[0].style.backgroundColor = "red";

آزمایش کنید

مثال 4

تعداد عناصر دارای class="example" در عنصر <div> را پیدا کنید (از طریق ویژگی length از NodeList):

/* وصول به عنصر div با id="myDIV" (div) و سپس دریافت همه عناصر p با class="example" در div، تعداد عناصر پیدا شده را بازگرداند */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

آزمایش کنید

مثال 5

رنگ پس‌زمینه همه عناصر با class="example" در عناصر <div> تنظیم شود:

// وصول به عنصر div با id="myDIV" (div) و سپس دریافت همه عناصر با class="example" در div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// ایجاد چرخه for و تنظیم رنگ پس‌زمینه همه عناصر با class="example" در div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

آزمایش کنید

مثال 6

رنگ پس‌زمینه همه عناصر <p> در عناصر <div> تنظیم شود:

// وصول به عنصر div با id="myDIV" (div) و سپس دریافت همه عناصر p در div
var x = document.getElementById("myDIV").querySelectorAll("p");
// ایجاد چرخه for و تنظیم رنگ پس‌زمینه همه عناصر p در div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

آزمایش کنید

مثال 7

نوع فریم‌های سبک برای همه عناصر <a> با ویژگی target در عناصر <div> تنظیم شود:

// وصول به عنصر div با id="myDIV" و سپس دریافت همه عناصر <a> با ویژگی target در div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// ایجاد چرخه‌ی for و تنظیم حاشیه‌ی تمام عناصر <a> با ویژگی target در div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

آزمایش کنید

مثال 8

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

// دریافت عنصر با id="myDIV" (div) و دریافت تمام عناصر <h2>، <div> و <span> در داخل <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// ایجاد چرخه‌ی for و تنظیم رنگ پس‌زمینه‌ی تمام عناصر <h2>، <div> و <span> در <div>
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:لیست Node List HTML DOM JavaScript

دستورالعمل JavaScript:element.querySelector()

دستورالعمل HTML DOM:document.querySelectorAll()