HTML DOM querySelectorAll() Method

مثال

تعيين لون الخلفية للعنصر الأول مع الطبقة = "مثلا" من داخل <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";

انها محاولة لنفسك »

أكثر "Try it Yourself" الأمثلة أدناه.

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

و querySelectorAll() الأسلوب بإرجاع مجموعة من العناصر التابعة للعناصر التي تتطابق مع CSS المحدد selector(s) ، ككائن NodeList ثابت.

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

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

لمزيد من المعلومات حول CSS المختارون، يرجى زيارة موقعنا CSS المختارون دروس ولدينا CSS المختارون المرجعي .

دعم المتصفح

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

طريقة
querySelectorAll()	4.0	تسعة	3.5	3.2	10.0

ملاحظة: إنترنت إكسبلورر 8 لديه الدعم لمحددات CSS2. IE9 والإصدارات الأحدث لديها دعم CSS3 كذلك.

بناء الجملة

element .querySelectorAll( CSS selectors )

قيم معلمة

معامل	اكتب	وصف
CSS selectors	String	مطلوب. تحديد واحد أو أكثر من محددات CSS لتتناسب مع عنصر. وتستخدم هذه لتحديد عناصر HTML على أساس من الهوية، والطبقات، وأنواع، والصفات والقيم من سمات، الخ لمحددات متعددة، فصل كل محدد بفاصلة. نصيحة: للحصول على قائمة من كافة CSS المختارون، والنظر في موقعنا CSS المختارون المرجعي .

تفاصيل تقنية

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

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

مثال

الحصول على جميع <p> عناصر داخل <div> العنصر، وتعيين لون الخلفية من أول <p> عنصر (index 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> مع الطبقة = "المثال"، وتعيين خلفية الأول <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";

انها محاولة لنفسك »

مثال

معرفة كيفية العديد من العناصر مع الطبقة = "المثال" هناك في <div> عنصر (باستخدام الخاصية طول الكائن 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;

انها محاولة لنفسك »

مثال

تعيين لون الخلفية من كل العناصر مع الطبقة = "المثال" في <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";
}

انها محاولة لنفسك »