استعلام عن مستند HTML DOM
مثال
حدد جميع العناصر مع class = "example":
document.querySelectorAll(".example");
المزيد من الأمثلة أدناه.
التعريف والاستخدام
تقوم هذه querySelectorAll()
الطريقة بإرجاع جميع العناصر التي تتطابق مع محدد (محددات) CSS.
تقوم querySelectorAll()
الطريقة بإرجاع NodeList .
يطرح querySelectorAll()
الأسلوب استثناء SYNTAX_ERR إذا كان المحدد (المحددات) غير صالح
دروس:
برنامج JavaScript Node List التعليمي
طرق QuerySelector:
طريقة استعلام العنصر SelectorAll ()
أسلوب استعلام المستند المحدد ()
أسلوب استعلام المستند SelectorAll ()
طرق GetElement:
أسلوب getElementById () المستند
HTML DOM NodeList / HTMLCollection
الاختلافات بين HTMLCollection و NodeList
تعد كل من NodeList و HTMLCollection مجموعات تشبه المصفوفة (قوائم) من العقد (العناصر) المستخرجة من مستند. يمكن الوصول إلى العقد عن طريق أرقام الفهرس. يبدأ الفهرس من 0.
كلا الكائنين لهما خاصية طول تُرجع عدد العناصر في القائمة.
مجموعة HTML هي مجموعة مباشرة : إذا أضفت <li> عنصرًا إلى قائمة في DOM ، فستتغير القائمة في مجموعة HTML أيضًا.
NodeList عبارة عن مجموعة ثابتة : إذا أضفت <li> عنصرًا إلى قائمة في DOM ، فلن تتغير القائمة في NodeList.
وتعيد getElementsByClassName()
الطرق getElementsByTagName()
مجموعة HTMLCollection.
وتعيد querySelector()
العمليات querySelectorAll()
إلى NodeList.
بناء الجملة
document.querySelectorAll(CSS selectors)
المعلمات
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
قيمة الإرجاع
نوع | وصف |
هدف | NodeList مع العناصر التي تطابق محدد (محددات) CSS. إذا لم يتم العثور على مباريات ، null يتم إرجاعها. |
مزيد من الأمثلة
أضف لون الخلفية إلى العنصر <p> الأول:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
أضف لون الخلفية إلى العنصر <p> الأول مع class = "example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
عدد العناصر التي تحتوي على class = "example":
let numb = document.querySelectorAll(".example").length;
اضبط لون الخلفية لجميع العناصر باستخدام class = "example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
اضبط لون الخلفية لجميع عناصر <p>:
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
عيّن حدود جميع <a> العناصر بسمة "الهدف":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
عيّن لون الخلفية لكل عنصر <p> حيث يكون الأصل هو عنصر <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
اضبط لون الخلفية لجميع عناصر <h3> و <div> و <span>:
const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
دعم المتصفح
document.querySelectorAll()
هي ميزة DOM من المستوى 3 (2004).
إنه مدعوم بالكامل في جميع المتصفحات:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |