این آموزش در تاریخ ۱۴۰۱/۰۵/۰۱ آپدیت شده است.

آموزش ویژگی classList در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی classList در DOM جاوااسکریپت با من همراه باشید.

ویژگی classList در DOM جاوااسکریپت

Free-Learn

ویژگی classList در DOM جاوااسکریپت

با استفاده از ویژگی classList میتونیم به کلاس های داخل یک تگ دسترسی پیدا نماییم، بعدش مثلا میتونیم کلاس جدید اضافه کنیم یا حذف و..

یه ویژگی دیگه بنام className هم داریم که اونم شبیه همین classList هستش ولی خب ویژگی classList با توجه به متدهایی که داره پیشرفته تر می باشد.

مقدار برگشتی لیستی از نام کلاس های تگ رو برمیگردونه

Free-Learn

مثال از این ویژگی

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

مثال شماره ۱ : بدست آوردن لیست تمامی کلاس های موجود در یک تگ

امتحان کنید

مثال شماره ۲ : اضافه و حذف کردن کلاس از یک تگ

امتحان کنید

مثال شماره ۳ : استفاده از متد toggle ( وقتی روی دکمه کلیک میشه کلاس اضافه میشه و وقتی دوباره رو همون دکمه کلیک میشه کلاس حذف میشه دیگه تا هرچقدر که کاربر بروی دکمه کلیک کنه )

امتحان کنید

مثال شماره ۴ : یک تگ ۴ تا کلاس داره ما میخوایم نام دومین کلاس رو بدست آوریم. ( با استفاده از متد item و شماره ایندکس )

امتحان کنید

مثال شماره ۵ : استفاده از متد contains برای چک کردن اینکه آیا یه تگ شامل یک کلاس خاص می باشد یا خیر!؟

میره چک میکنه ببینه آیا مثلا فلان نام کلاس در بین کلاس های موجود در تگ وجود داره یا نه، اگه وجود داشته باشه true به خروجی میفرسته و اگه نباشه false میفرسته

بعدش من به کمک دستور شرطی IF ، گفتم اگه اون کلاسه وجود داشت خب از تگ حذفش کن و اگه وجود نداشت اضافش کن.

امتحان کنید

مثال شماره ۶ : اضافه کردن همزمان چندین نام کلاس به تگ

امتحان کنید

مثال شماره ۷ : حذف کردن همزمان چندین نام کلاس از تگ

امتحان کنید

مثال شماره ۸ : جایگزین کردن یک نام کلاس با نام کلاس دیگر

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari Edge
classList بله بله بله بله بله

Free-Learn

شکل نوشتاری ویژگی classList در DOM جاوااسکریپت

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

Free-Learn

ویژگی ها

در جدول زیر میتوانید ویژگی های قابل استفاده در classList رو مشاهده نمایید.

مقدار توضیح
length برای بدست آوردن تعداد عددی ( کل ) کلاس های موجود در یک تگ

Free-Learn

متدها

در جدول زیر میتوانید متدهای قابل استفاده در classList رو مشاهده نمایید.

مقدار توضیح
add(“ClassName“) * برای اضافه کردن یک نام کلاس

* برای اضافه کردن چندین کلاس بصورت همزمان
contains(“ClassName“) برای چک کردن اینکه آیا یک تگ شامل یک کلاس خاصی می باشد یا خیر
item(“index”) برای بدست آوردن نام یک کلاس بر اساس شماره ایندکس یا جایگاه
remove(“ClassName“) * برای حذف کردن یک نام کلاس

* برای حذف کردن چندین کلاس بصورت همزمان
toggle(“ClassName“) برای جابه جایی بین نام کلاس ها
دقیقا مثه یه کلید ۲حالته هس
همانند مثال شماره ۳
replace( Old_Class, New_Class ) برای جایگزین کردن کلاس ها
Old_Class = کلاس فعلی
New_Class = کلاس جدید که قراره جایگزین کلاس فعلی شه
همانند مثال شماره ۸

Free-Learn

نکات و توضیحات

  • با استفاده از متد add ، اگه کلاس از قبل وجود داشته باشه، دیگه اضافش نمیکنه.
  • با استفاده از متد remove در هنگام حذف یک نام کلاس، اگه کلاس از قبل وجود نداشته باشه هیچ ارور یا خطایی داده نمیشه.
  • با استفاده از متد item میتوان به نام کلاس های یک عنصر بر اساس شماره ایندکس یا شماره جایگاه دسترسی پیدا کرد. ( همیشه شماره ایندکس از ۰ شروع میشه )
  • برای اضافه یا حذف کردن چندین کلاس بصورت همزمان، باید هر یک از کلاس هارو درون دابل کوتیشن ” ” گذاشت و بینشون کاما , قرار داد.

Free-Learn

مثال های بیشتر

مثال شماره ۱ : ایجاد حالت شب یا ( Night Mode ) ، با کلیک بروی دکمه صفحه تاریک میشه و دوباره با کلیک بروی همون دکمه صفحه روشن میشه

امتحان کنید

توضیح مثال بالا :

برای اضافه کردن استایل صفحه در حالت شب، باید بصورت زیر عمل نمایید :

مثال :

Free-Learn

دریافت PDF یا پرینت این مطلب