متد element.getElementsByClassName

مثال (متد element.getElementsByClassName)

تغییر دادن متن اولین آیتم list با "class="child (اندیس 0)، که در list با کلاس example قرار دارد:

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

قبل از تغییر دادن متن:

Coffee
Tea

بعد از تغییر دادن متن:

Milk
Tea

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

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

شیء NodeList یک مجموعه از گره ها را مشخص می کند. به وسیله ی اندیس ها می توان به این گره ها دسترسی پیدا نمود. اندیس شروع نیز 0 می باشد.

نکته: شما می توانید از خصوصیت length از شیء NodeList، برای مشخص کردن تعداد گره ها با یک نام کلاس مشخص استفاده کرده و سپس بر روی تمام گره ها، یک حلقه ایجاد کرده و اطلاعات مورد نظر خود را استخراج کنید.

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

اعداد داخل جدول زیر نشان دهنده ی اولین ورژن مرورگری است که به طور کامل از این متد پشتیبانی می کند.

متد
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

نحوه استفاده

element.getElementsByClassName(classname)

مقادیر پارامترها

پارامتر	Type	توضیحات
classname	String	ضروری. نام کلاس عناصر فرزندی که شما می خواهید آنها را به دست بیاورید. در جستجو برای کلاس های چندگانه، این کلاس ها را با کاراکتر فاصله از یکدیگر جدا کنید(مانند : child color).

پارامتر

Type

توضیحات

classname

String

ضروری. نام کلاس عناصر فرزندی که شما می خواهید آنها را به دست بیاورید.

در جستجو برای کلاس های چندگانه، این کلاس ها را با کاراکتر فاصله از یکدیگر جدا کنید(مانند : child color).

جزئیات تکنیکی

DOM Version:	Core Level 1 کلیه توابع و خصوصیت های شیء Element در JavaScript
مقدار برگشتی	یک شیء NodeList که مشخص کننده ی مجموعه از عناصر فرزند عنصر مورد نظر با یک نام کلاس مشخص می باشد. عناصر درون مجموعه ی برگردانده شده همان طور که در سورس کد ذخیره می شوند، نمایش داده می شوند.

مثال - خودتان امتحان کنید

مثال (متد element.getElementsByClassName)

تغییر دادن رنگ پس زمینه ی دومین عنصر با کلاس "child" که در درون یک عنصر <div> قرار دارد:

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

خودتان امتحان کنید »

مثال (متد element.getElementsByClassName)

فهمیدن اینکه چه تعداد عنصر با کلاس child درون یک عنصر <div> قرار دارند(استفاده از خصوصیت length از شیء NodeList):

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

خروجی x در کد بالا

خودتان امتحان کنید »

مثال (متد element.getElementsByClassName)

تغییر دادن رنگ پس زمینه ی اولین عنصر دارای کلاس های "child" و "color" که درون یک عنصر با کلاس "example" قرار دارد:

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

خودتان امتحان کنید »

مثال (متد element.getElementsByClassName)

تغییر دادن رنگ پس زمینه ی تمام عناصر با کلاس "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";
}

خودتان امتحان کنید »