روش getElementsByClassName() HTML DOM Element

تعریف و استفاده

getElementsByClassName() این روش مجموعه‌ای از فرزندان دارای نام کلاس خاص را برمی‌گرداند، به عنوان یک شیء NodeList.

لطفاً به اینجا نیز نگاه کنید:

ویژگی classList

ویژگی className

روش querySelector()

روش querySelectorAll()

روش getElementsByTagName()

ایچ تی ایم ال ڈوم اسٹائل آوائیج

آموزش:

CSS زبان

CSS انتخاب‌کننده

CSS انتخاب‌کننده مرجع

NodeList

NodeList یک مجموعه‌ی گره‌های مشابه با آرایه (لیست) است.

شما می‌توانید با استفاده از شماره‌ی دسترسی (شمارنده) به گره‌های لیست دسترسی داشته باشید. شمارنده از 0 شروع می‌شود.

ویژگی lengthتعداد گره‌های لیست را بازگرداند.

مثال

مثال 1

با استفاده از class="child" متن اولین لیست را تغییر دهید:

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

آپ خود کا تجربہ کریں

مثال 2

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

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

آپ خود کا تجربہ کریں

مثال 3

تغییر اندازه عنصر دوم class="child":

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

آپ خود کا تجربہ کریں

مثال 4

class="example" کی دوسری عنصر میں "child" اور "color" کلاس کا استعمال کرکے پہلی عنصر کی بڑائی بدل دیں:

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) کی خصوصیت ہے۔

تمام براوزر اس کو پورا طور پر سپورٹ کرتے ہیں:

کروم آئی ای ایجی فائرفاکس سافری آپریا
کروم آئی ای ایجی فائرفاکس سافری آپریا
پشتیبندی 9-11 پشتیبندی پشتیبندی پشتیبندی پشتیبندی