طريقة querySelectorAll() في مستند مثلث الهيكلية HTML DOM
- الصفحة السابقة
- الصفحة التالية
- العودة إلى الطبقة السابقة مثلث الهيكلية Documents
التعريف والاستخدام
querySelectorAll() يُرجع الطريقة جميع العناصر التي تتطابق مع المُختار CSS.
querySelectorAll() يُرجع الطريقة NodeList.
إذا كان المُختار غير صالح، querySelectorAll() يُتوقع أن يُلقي الطريقة SYNTAX_ERR استثنائية.
مثال
مثال 1
اختيار جميع العناصر التي تحتوي على class="example":
document.querySelectorAll(".example");
مثال 2
إضافة لون الخلفية للعنصر الأول من <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
مثال 3
إضافة لون الخلفية للعنصر الأول من class="example" <p>:
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
مثال 4
عدد العناصر التي تحتوي على class="example":
let numb = document.querySelectorAll(".example").length;
مثال 5
ضبط لون الخلفية لجميع العناصر التي تحتوي على class="example":
const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 6
ضبط لون الخلفية لجميع العناصر <p>.
let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 7
ضبط الحواف لجميع العناصر <a> التي تستخدم الخاصية "target".
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
مثال 8
ضبط لون الخلفية لكل عناصر <p> التي تكون العناصر الأب هي <div>.
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
مثال 9
ضبط لون الخلفية لجميع العناصر <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(CSSselectors)
المعلمات
| المعلمات | وصف |
|---|---|
| CSSselectors |
مطلوب. محدد أو أكثر من CSS. محددات CSS تختار عناصر HTML بناءً على id، الفئة، النوع، الخاصية، قيمة الخاصية، إلخ. للحصول على قائمة كاملة، يرجى زيارة دليل مرجعي لاختيارات CSS. للعديد من المحددات، استخدم فاصلة للفصل بين كل محدد (انظر المثال أعلاه). |
القيمة التي تعود
| نوع | وصف |
|---|---|
| مفهوم |
مجموعة NodeList تحتوي على العناصر التي تتطابق مع ميزة المحدد. إذا لم يتم العثور على أي تطابق، يتم العودة إلى NodeList فارغة. |
الفرق بين HTMLCollection و NodeList
NodeList و HTMLcollection مثل جداً.
كلاهما مجموعات من العناصر (العناصر) الموجودة في المستند التي تم استخراجها بشكل مشابه لقائمة من النود (العناصر). يمكن الوصول إلى العناصر باستخدام الرقم (السطر). الرقم من البداية.
كلاهما length خصائص، تؤدي إلى عودة قائمة (مجموعة) من عدد العناصر الموجودة.
HTMLCollection هوعنصر الوثيقةالجمع.
NodeList هوعنصر الوثيقةجمع من العناصر (العنصر النصي، العنصر الخاصية، العنصر النصي).
عناصر HTMLCollection يمكن الوصول إليها من خلال الأسماء أو id أو الأرقام.
عناصر NodeList يمكن الوصول إليها فقط من خلال أرقامها.
HTMLCollection دائمًاحيةالجمع.
على سبيل المثال: إذا تم إضافة عنصر <li> إلى قائمة DOM، فإن قائمة HTMLCollection ستتغير أيضًا.
NodeList عادةثابتةالجمع.
على سبيل المثال: إذا تم إضافة عنصر <li> إلى قائمة DOM، فإن قائمة NodeList لن تتغير.
getElementsByClassName() و getElementsByTagName() الطرق تعود HTMLCollection حية.
querySelectorAll() الطرق تعود NodeList ثابتة.
childNodes الخصائص تعود NodeList حية.
دعم المتصفح
document.querySelectorAll() هي خاصية مستوى DOM 3 (2004).
يدعم جميع المتصفحات
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| الدعم | 9-11 | الدعم | الدعم | الدعم | الدعم |
الصفحات ذات الصلة
دليل:
دليل تعلم قائمة العقد JavaScript
طريقة QuerySelector:
طريقة querySelector() لـ Element
طريقة querySelectorAll() لـ Element
طريقة querySelector() لـ Document
طريقة querySelectorAll() لـ Document
طريقة GetElement:
طريقة getElementById() لـ Document
- الصفحة السابقة
- الصفحة التالية
- العودة إلى الطبقة السابقة مثلث الهيكلية Documents
