آموزش طراحی سایت (HTML CSS Javascript) | آتریا

متد document.getElementsByClassName

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

به دست آوردن تمام عناصر که دارای یک نام کلاس مشخص هستند:

var x = document.getElementsByClassName("example");

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

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

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

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

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

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

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

متد
getElementsByClassName()	4.0	9.0	3.0	3.1	9.5

نحوه استفاده

document.getElementsByClassName(classname)

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

پارامتر	Type	توضیحات
classname	String	ضروری. نام کلاس عناصری که شما می خواهید به آنها دسترسی داشته باشید. برای جستجو کردن برای کلاس های متعدد ، نام های کلاسهای مورد نظر را به وسیله ی فاصله از یکدیگر جدا کنید مانند: test demo

پارامتر

Type

توضیحات

classname

String

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

برای جستجو کردن برای کلاس های متعدد ، نام های کلاسهای مورد نظر را به وسیله ی فاصله از یکدیگر جدا کنید مانند: test demo

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

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

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

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

به دست آوردن تمام عناصر با کلاس های "exampe" و "color":

var x = document.getElementsByClassName("example color");

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

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

فهمیدن اینکه چه تعداد عنصر با "class="example در سند وجود دارند(استفاده از خصوصیت length بر روی شیء NodeList):

var x = document.getElementsByClassName("example").length;

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

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

تغییر دادن رنگ پس زمینه ی تمام عناصر با "class="example :

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

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

آموزش های مرتبط

CSS Tutorial: CSS Selectors

CSS Reference: CSS .class Selector

HTML DOM Reference: element.getElementsByClassName()

HTML DOM Reference: className Property

HTML DOM Reference: HTML DOM classList Property

HTML DOM Reference: HTML DOM Style Object

کلیه توابع و خصوصیت های شیء Document در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 7617

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی