قائمة DOM HTML Element querySelectorAll()

التعريف والاستخدام

querySelectorAll() تعود هذه الطريقة بمجموعة من الأبناء للعناصر التي تتطابق مع CSS selector المحدد، بمثابة NodeList ثابت.

NodeList

NodeList هو مجموعة من النodes مثل array (قائمة).

يمكن الوصول إلى العناصر في القائمة عبر الفهرس (السلسلة). يبدأ الفهرس من 0.

خاصية length يمكنها العودة إلى عدد العناصر في القائمة.

انظر أيضًا:

دليل مرجعي

خاصية classList

خاصية className

طريقة querySelector()

طريقة getElementsByTagName()

طريقة getElementsByClassName()

مثل HTML DOM Style

دليل:

قواعد اللغة CSS

محددات CSS

دليل مرجعي لمحددات CSS

مثال

مثال 1

تعيين لون الخلفية للعنصر الأول class="example" داخل عناصر <div>:

// الحصول على العنصر (div) المحدد بـ id="myDIV"، ثم الحصول على جميع العناصر داخل div التي تحتوي على class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// تعيين لون الخلفية للعنصر الأول class="example" (السلسلة 0) داخل div
x[0].style.backgroundColor = "red";

جرب بنفسك

إشارة:يقدم المزيد من الأمثلة في نهاية الصفحة.

القواعد النحوية

element.querySelectorAll(cssSelectors)

معلمات

معلمات وصف
cssSelectors

مطلوب. نصي. يحدد CSS selector واحد أو أكثر لتصفية العناصر.

CSS selectors تستخدم لتصفية عناصر HTML بناءً على id، class، نوع، الخاصية، قيمة الخاصية، إلخ.

بالنسبة لعدة selectors، يتم فصل كل selector بلوغماً.

إشارة:للحصول على قائمة بأسماء جميع selectors CSS، يرجى الرجوع إلى دليل مرجعي لمحددات CSS.

تفاصيل تقنية

القيمة الم返回ة:

مثل NodeList يشير إلى جميع الأبناء للعناصر الحالية التي تتطابق مع CSS selector المحدد.

NodeList هو مجموعة ثابتة، مما يعني أن التغييرات في DOM لا تؤثر على المجموعة.

ملاحظة:إذا كان المحدد محدداً غير صالح، يتم إلقاء استثناء SYNTAX_ERR
إصدار DOM: مستند مستوى 1 Selectors Document Object

مزيد من الأمثلة

مثال 2

الحصول على جميع عناصر <p> داخل عناصر <div> وتعيين لون الخلفية للعنصر <p> الأول (السلسلة 0):

// تحصل على العنصر الذي يحتوي على id="myDIV" (div) ثم تحصل على جميع عناصر p في الداخل div:
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// تعيين لون الخلفية للعنصر <p> الأول (السلسلة 0) داخل div
x[0].style.backgroundColor = "red";

جرب بنفسك

مثال 3

الحصول على جميع عناصر <p> داخل <div> التي تحتوي على class="example" وتعيين لون الخلفية للعنصر <p> الأول:

// تحصل على العنصر الذي يحتوي على id="myDIV" (div) ثم تحصل على جميع العناصر التي تحتوي على class="example" و p في الداخل div:
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// حدد لون الخلفية للعنصر الأول <p> الذي يحتوي على class="example" في div (الواقع 0):
x[0].style.backgroundColor = "red";

جرب بنفسك

مثال 4

ابحث عن عدد العناصر التي تحتوي على class="example" في عناصر <div> (استخدام خاصية length من NodeList):

/* تحصل على العنصر الذي يحتوي على id="myDIV" (div) ثم تحصل على جميع عناصر p التي تحتوي على class="example" في الداخل div، وتحصل على عدد العناصر الموجودة */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

جرب بنفسك

مثال 5

حدد لون الخلفية للعناصر التي تحتوي على class="example" في عناصر <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>:

// تحصل على العنصر الذي يحتوي على 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>:

// تحصل على العنصر الذي يحتوي على id="myDIV" (div) ثم تحصل على جميع عناصر <a> التي تحتوي على الخاصية "target"
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:قائمة JavaScript HTML DOM Node List

دليل JavaScript:element.querySelector()

دليل HTML DOM:document.querySelectorAll()