مثال
الحصول على جميع العناصر في وثيقة مع الطبقة = "مثال":
var x =
document.querySelectorAll(".example"); انها محاولة لنفسك » أكثر "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 كذلك.
بناء الجملة
document.querySelectorAll( CSS selectors )قيم معلمة
| معامل | اكتب | وصف |
|---|---|---|
| CSS selectors | String | مطلوب. تحديد واحد أو أكثر من محددات CSS لتتناسب مع عنصر. وتستخدم هذه لتحديد عناصر HTML على أساس من الهوية، والطبقات، وأنواع، والصفات والقيم من سمات، الخ لمحددات متعددة، فصل كل محدد بفاصلة. نصيحة: للحصول على قائمة من كافة CSS المختارون، والنظر في موقعنا CSS المختارون المرجعي . |
تفاصيل تقنية
| صفحة DOM: | مستوى محددات كائن 1 الوثيقة |
|---|---|
| قيمة الإرجاع: | كائن NodeList، يمثلون جميع العناصر في المستند الذي يطابق CSS المحدد selector(s) . وNodeList هو عبارة عن مجموعة ثابتة، وهذا يعني أن التغيرات في DOM له أي تأثير في المجموعة. يلقي استثناء SYNTAX_ERR إذا كان selector(s) غير صالح |
مزيد من الأمثلة
مثال
الحصول على جميع <p> العناصر في الوثيقة، وتعيين لون الخلفية من أول <p> عنصر (index 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"; انها محاولة لنفسك » مثال
الحصول على جميع <p> عناصر في وثيقة مع الطبقة = "المثال"، وتعيين خلفية الأول <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"; انها محاولة لنفسك » مثال
معرفة كيفية العديد من العناصر مع الطبقة = "المثال" هناك في وثيقة (باستخدام الخاصية طول الكائن NodeList):
var x =
document.querySelectorAll(".example").length; انها محاولة لنفسك » مثال
تعيين لون الخلفية لجميع العناصر في وثيقة مع الطبقة = "مثال":
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} انها محاولة لنفسك » مثال
تعيين لون الخلفية من كل <p> العناصر في الوثيقة:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} انها محاولة لنفسك » مثال
تعيين الحدود من كل <a> عناصر في الوثيقة التي لديها "target" سمة:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} انها محاولة لنفسك » مثال
تعيين لون الخلفية من كل <p> عنصر حيث الأصل هو <div> العنصر:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} انها محاولة لنفسك » مثال
تعيين لون الخلفية من كل <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 دروس: CSS المختارون
CSS المرجعي: CSS المختارون المرجعي
جافا سكريبت تعليمي: قائمة جافا سكريبت HTML DOM عقدة
HTML DOM المرجعي: وثيقة. querySelector()
HTML DOM المرجعي: العنصر. querySelectorAll()