مستند HTML DOM ، getElementsByClassName ()
مثال
احصل على جميع العناصر مع class = "example":
const collection = document.getElementsByClassName("example");
احصل على جميع العناصر مع كل من فئتي "example" و "color":
const collection = document.getElementsByClassName("example color");
المزيد من الأمثلة أدناه.
التعريف والاستخدام
تقوم getElementsByClassName()
الطريقة بإرجاع مجموعة من العناصر باسم (أسماء) فئة محددة.
تقوم getElementsByClassName()
الطريقة بإرجاع مجموعة HTMLCollection .
getElementsByClassName()
الخاصية للقراءة فقط .
مجموعة HTML
مجموعة HTML هي مجموعة من عُقد HTML.
يمكن الوصول إلى العقد في مجموعة من خلال أرقام الفهرس. يبدأ الفهرس من 0.
ترجع خاصية length عدد العناصر في المجموعة.
أنظر أيضا:
أسلوب getElementById () المستند
أسلوب getElementsByTagName () المستند
أسلوب استعلام المستند المحدد ()
بناء الجملة
document.getElementsByClassName(classname)
المعلمات
Parameter | Description |
classname | Required. The class name of the elements. Search for multiple class names separated by spaces like "test demo". |
قيمة الإرجاع
نوع | وصف |
هدف. | كائن HTMLCollection . مجموعة من العناصر باسم الفئة المحدد. يتم فرز العناصر كما تظهر في المستند. |
مزيد من الأمثلة
عدد العناصر التي تحتوي على class = "example":
let numb = document.getElementsByClassName("example").length;
تغيير لون الخلفية لجميع العناصر باستخدام class = "example":
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
الصفحات ذات الصلة
دروس CSS: بناء جملة CSS
مرجع CSS : محدد فئة CSS
مرجع HTML DOM: element .getElementsByClassName ()
مرجع HTML DOM: خاصية className
مرجع HTML DOM: خاصية classList
مرجع HTML DOM: كائن النمط
دعم المتصفح
document.getElementsByClassName()
هي ميزة DOM المستوى 1 (1998).
إنه مدعوم بالكامل في جميع المتصفحات:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |