أسلوب HTML DOM querySelectorAll ()

مثال

اضبط لون خلفية العنصر الأول مع class = "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 () مجموعة من العناصر الفرعية لعنصر ما والتي تتطابق مع محدد (محددات) CSS المحدد ، ككائن NodeList ثابت.

يمثل كائن NodeList مجموعة من العقد. يمكن الوصول إلى العقد عن طريق أرقام الفهرس. يبدأ الفهرس من 0.

تلميح: يمكنك استخدام خاصية length لكائن NodeList لتحديد عدد العقد الفرعية التي تتطابق مع المحدد المحدد ، ثم يمكنك تكرار كل العقد واستخراج المعلومات التي تريدها.

لمزيد من المعلومات حول محددات CSS ، تفضل بزيارة البرنامج التعليمي لمحددات CSS ومرجع محددات CSS الخاص بنا .

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

ملاحظة: يدعم Internet Explorer 8 محددات CSS2. تدعم IE9 والإصدارات الأحدث CSS3 أيضًا.

بناء الجملة

element.querySelectorAll(CSS selectors)

قيمه المعامل

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

تفاصيل تقنية

إصدار DOM:	محددات المستوى 1 كائن المستند
قيمة الإرجاع:	كائن NodeList ، يمثل جميع العناصر التابعة للعنصر الحالي الذي يتطابق مع محدد (محددات) CSS المحدد. NodeList عبارة عن مجموعة ثابتة ، مما يعني أن التغييرات في DOM ليس لها أي تأثير في المجموعة. ملاحظة: يطرح استثناء SYNTAX_ERR إذا كان المحدد (المحددات) المحدد غير صالح

إصدار DOM:

محددات المستوى 1 كائن المستند

قيمة الإرجاع:

كائن NodeList ، يمثل جميع العناصر التابعة للعنصر الحالي الذي يتطابق مع محدد (محددات) CSS المحدد. NodeList عبارة عن مجموعة ثابتة ، مما يعني أن التغييرات في DOM ليس لها أي تأثير في المجموعة.

ملاحظة: يطرح استثناء SYNTAX_ERR إذا كان المحدد (المحددات) المحدد غير صالح

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

مثال

احصل على جميع عناصر <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";

مثال

احصل على جميع عناصر <p> في <div> مع class = "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";

مثال

اكتشف عدد العناصر التي تحتوي على class = "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;

مثال

اضبط لون الخلفية لجميع العناصر باستخدام class = "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 < x.length; i++) {
x[i].style.backgroundColor = "red";
}

مثال

اضبط لون الخلفية لجميع عناصر <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 < x.length; i++) {
x[i].style.backgroundColor = "red";
}

مثال

عيّن نمط الحدود لجميع العناصر <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";
}

مثال

عيّن لون الخلفية لجميع عناصر <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";
}