مетод getElementsByClassName() در مستند HTML DOM Document

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

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

ضروری. نام کلاس عنصر.

مجموعه‌ای از نام‌های کلاس‌های جدا شده با فاصله، مانند "test demo" را برمی‌گرداند.

نوع توضیح
عنصر

مجموعه HTMLCollection.

مجموعه‌ای از عناصر با نام کلاس مشخص شده.

عناصر را بر اساس ترتیب ظاهر شدن در مستند مرتب می‌کند.

پشتیبانی مرورگر

method getElementsByClassName(document) این یک ویژگی DOM Level 1 (1998) است.

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 9-11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی

صفحات مرتبط

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

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

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

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

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

دستورالعمل HTML DOM:مجموعه Style