طريقة getElementsByClassName() في مستند HTML DOM

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

getElementsByClassName() تستعيد الطريقة مجموعة العناصر التي تحتوي على اسم الفئة المحدد.

getElementsByClassName() تستعيد الطريقة HTMLCollection.

getElementsByClassName() العنصر قابلاً للقراءة فقط.

HTMLCollection

HTMLCollection هي مجموعة من عناصر HTML تشبه اللائحة (القائمة).

يمكن الوصول إلى العناصر في المجموعة باستخدام الفهرس (بدءًا من 0).

طول العنصر يعود بعدد العناصر في المجموعة.

انظر أيضًا:

طريقة getElementById()

طريقة getElementsByTagName()

طريقة querySelector()

طريقة querySelectorAll()

مجموعة HTMLCollection

مثال

مثال 1

الحصول على جميع العناصر التي تحتوي على الفئة "example":

const collection = document.getElementsByClassName("example");

جرب بنفسك

مثال 2

الحصول على جميع العناصر التي تحتوي على الفئات "example" و "color" في نفس الوقت:

تعريف المتغير الجمعية = document.getElementsByClassName("example color");

جرب بنفسك

مثال 3

عدد العناصر التي تحتوي على class="example":

let numb = document.getElementsByClassName("example").length;

جرب بنفسك

مثال 4

تغيير لون الخلفية لجميع العناصر التي تحتوي على class="example":

const collection = document.getElementsByClassName("example");
لـ (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

جرب بنفسك

النصاب

document.getElementsByClassName("example")classname)

المعدل

المعدل وصف
classname

مطلوب. اسم الفئة للعنصر.

مطلوب. اسم الفئة للعنصر. يمكن البحث عن عدة فئات منفصلة بفواصل، مثل "test demo".

القيمة التي يتم ردها

نوع وصف
مفهوم

مفهوم HTMLCollection

مجموعة العناصر التي تحتوي على اسم فئة معين.

يتم ترتيب العناصر وفقًا للترتيب الذي يظهر بهم في المستند.

دعم المتصفحات

document.getElementsByClassName() هي خاصية DOM Level 1 (1998).

يدعم جميع المتصفحات:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم

الصفحات ذات الصلة

دروس CSS:نحو CSS

دليل مرجع CSS:نحو .class المختار

دليل مرجع HTML DOM:element.getElementsByClassName()

دليل مرجع HTML DOM:خصائص className

دليل مرجع HTML DOM:خصائص classList

دليل مرجع HTML DOM:مفهوم Style