HTML DOM Document getElementsByClassName() طریقہ کار

تعریف اور استعمال

getElementsByClassName() طریقہ کار کا نتیجہ متعین کلاس کا عناصر کا مجموعہ پیش کرتا ہے。

getElementsByClassName() طریقہ کار HTMLCollection

getElementsByClassName() پائیدار اعداد شمار بھی پائیدار ہیں۔

HTMLCollection

HTMLCollection یہ HTML عناصر کا ایک مشابہ تعداداتی مجموعہ (لیسٹ) ہوتا ہے。

مجموعے میں موجود عناصر کو اشاریہ کے ذریعے بروئے کار لایا جاسکتا ہے (0 سے شروع ہوتا ہے)。

length پائیدار اعداد شمار کو مجموعے میں موجود عناصر کی تعداد بھی پیش کرتا ہے。

دوسری پیمانوں میں دیکھیجئے:

getElementById() طریقہ کار

getElementsByTagName() طریقہ کار

querySelector() طریقہ کار

querySelectorAll() طریقہ کار

HTMLCollection عناصر کا مجموعہ

مثال

مثال 1

class="example" والی تمام عناصر حاصل کرنا کا عمل

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

آزمایش کنید

مثال 2

مقابلہ حاصل کرنا کا عمل کیا جاتا ہے جو "example" اور "color" کلاسوں والی تمام عناصر رکھتا ہو

const collection = 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) است.

همه مرورگرها از آن پشتیبانی می‌کنند:

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

صفحات مرتبط

آموزش CSS:CSS زبان

دستورالعمل CSS:CSS .class انتخابگر

دستورالعمل HTML DOM:element.getElementsByClassName()

دستورالعمل HTML DOM:ویژگی className

دستورالعمل HTML DOM:ویژگی classList

دستورالعمل HTML DOM:آبیه Style