طريقة HTML DOM getElementsByClassName ()

مثال

قم بتغيير نص عنصر القائمة الأول باستخدام class = "child" (الفهرس 0) في قائمة تحتوي على class = "example":

var list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

المزيد من الأمثلة "جربها بنفسك" أدناه.

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

تقوم طريقة getElementsByClassName () بإرجاع مجموعة من العناصر التابعة لعنصر باستخدام اسم الفئة المحدد ، ككائن NodeList.

يمثل كائن NodeList مجموعة من العقد. يمكن الوصول إلى العقد عن طريق أرقام الفهرس. يبدأ الفهرس من 0.

تلميح: يمكنك استخدام خاصية length لكائن NodeList لتحديد عدد العقد الفرعية مع اسم الفئة المحدد ، ثم يمكنك تكرار كل العقد واستخراج المعلومات التي تريدها.

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.

Method
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

بناء الجملة

element.getElementsByClassName(classname)

قيمه المعامل

Parameter	Type	Description
classname	String	Required. The class name of the child elements you want to get. To search for multiple class names, separate them with spaces, like "child color".

تفاصيل تقنية

إصدار DOM:	كائن عنصر المستوى 1 الأساسي
قيمة الإرجاع:	كائن NodeList ، يمثل مجموعة من العناصر الفرعية للعناصر مع اسم الفئة المحدد. يتم فرز العناصر الموجودة في المجموعة التي تم إرجاعها كما تظهر في التعليمات البرمجية المصدر.

مزيد من الأمثلة

مثال

غيّر لون خلفية العنصر الثاني باستخدام class = "child" داخل عنصر <div>:

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor = "red";

مثال

اكتشف عدد العناصر التي تحتوي على class = "child" داخل عنصر <div> (باستخدام خاصية length لكائن NodeList):

var x = document.getElementById("myDIV").getElementsByClassName("child").length;

مثال

تغيير لون الخلفية للعنصر الأول مع كل من فئة "child" و "color" داخل عنصر باستخدام class = "example":

var x = document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor = "red";

مثال

غيّر لون الخلفية لجميع العناصر باستخدام class = "child" داخل عنصر <div>:

var x = document.getElementById("myDIV");
var y = x.getElementsByClassName("child");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}