طريقة HTML DOM Element getElementsByClassName()

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

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

يرجى الرجوع إلى:

خصائص classList

خصائص className

طريقة querySelector()

طريقة querySelectorAll()

طريقة getElementsByTagName()

مثال على HTML DOM Style

دليل:

نحو لغة CSS

محددات CSS

دليل مرجعي لمحددات CSS

NodeList

NodeList هي مجموعة من العناصر الشبيهة بالقوائم (الأسطر).

يمكنك الوصول إلى العناصر في القائمة باستخدام مؤشر (السحابة). يبدأ المؤشر من 0.

خصائص lengthيعود عدد العناصر في القائمة.

مثال

مثال 1

استخدام class="child" لتغيير نص العنصر الأول من القائمة:

تعريف list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

جرب بنفسك

مثال 2

عدد العناصر من "myDIV" مع class="child":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
عدد number = nodes.length;

جرب بنفسك

مثال 3

تغيير حجم العنصر الثاني من class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

جرب بنفسك

مثال 4

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

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

جرب بنفسك

مثال 5

غير لون جميع العناصر التي تحتوي على class="child" في "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

جرب بنفسك

النص

element.getElementsByClassName(classname)

المعامل

المعامل الوصف
classname

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

استخدم مسافات للفصل بين عدة أسماء (مثل "child color").

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

النوع الوصف
NodeList

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

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

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

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

جميع المتصفحات تدعمها بشكل كامل:

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