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

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

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

Free-Learn

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

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

با استفاده از این ویژگی میتوان به راحتی یک یا چندین کلاس برای یک تگ تعریف و یا حذف کرد.

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

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

Free-Learn

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

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

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

امتحان کنید

مثال شماره ۲ : با کلیک بروی یک دکمه، کلاس free-learn به تگ اضافه میشه و با کلیک بروی یک دکمه دیگه، این کلاس حذف میشه.

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۵ : نحوه استفاده از متد contains ( میره چک میکنه که ببینه آیا مثلا فلان نام کلاس در بین نام های کلاس موجود در تگ وجود داره یا نه )

امتحان کنید

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
classList ۸٫۰ ۳٫۶ ۱۱٫۵ ۵٫۱ ۱۰٫۰

Free-Learn

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

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

Free-Learn

ویژگی ها

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

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

Free-Learn

متدها

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

مقدار توضیح
add(“class1”) برای اضافه کردن یک یا چندین نام کلاس
* برای اضافه کردن چندین کلاس بصورت همزمان

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

* اگه نام کلاس وجود نداشته باشه هیچ ارور یا خطایی نمیده
toggle(“class”) برای جابه جایی بین نام کلاس ها
اگه کلاس وجود نداشت ، اضافش میکنه و true برمیگردونه
اگه کلاس وجود داشت حذفش میکنه و false برمیگردونه

Free-Learn

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

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

Free-Learn

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

مثال شماره ۱ : ایجاد حالت شب یا ( Night Mode ) – دکمه ی حالت شب بصورت فیکس در سمت چپ گوشه پایین صفحه قرار دارد.

امتحان کنید

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

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

مثال :

Free-Learn

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