این آموزش در تاریخ ۱۴۰۱/۰۵/۰۱ آپدیت شده است.
آموزش ویژگی classList در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی classList در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی classList در DOM جاوااسکریپت
با استفاده از ویژگی classList میتونیم به کلاس های داخل یک تگ دسترسی پیدا نماییم، بعدش مثلا میتونیم کلاس جدید اضافه کنیم یا حذف و..
یه ویژگی دیگه بنام className هم داریم که اونم شبیه همین classList هستش ولی خب ویژگی classList با توجه به متدهایی که داره پیشرفته تر می باشد.
| مقدار برگشتی | لیستی از نام کلاس های تگ رو برمیگردونه |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن لیست تمامی کلاس های موجود در یک تگ
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get(){ var MyH2 , Result , MyClassList; MyH2 = document.getElementById("myh2"); Result = document.getElementById("Result"); MyClassList = MyH2.classList; Result.innerHTML = MyClassList; } </script> |
مثال شماره ۲ : اضافه و حذف کردن کلاس از یک تگ
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Add(){ MyH2.classList.add("free-learn"); } function Del(){ MyH2.classList.remove("free-learn"); } </script> |
مثال شماره ۳ : استفاده از متد toggle ( وقتی روی دکمه کلیک میشه کلاس اضافه میشه و وقتی دوباره رو همون دکمه کلیک میشه کلاس حذف میشه دیگه تا هرچقدر که کاربر بروی دکمه کلیک کنه )
|
1 2 3 4 5 6 7 8 9 |
<script> function Add(){ var MyH2; MyH2 = document.getElementById("myh2"); MyH2.classList.toggle("free-learn"); } </script> |
مثال شماره ۴ : یک تگ ۴ تا کلاس داره ما میخوایم نام دومین کلاس رو بدست آوریم. ( با استفاده از متد item و شماره ایندکس )
|
1 2 3 4 5 6 7 |
<script> function Get(){ MyClassList = MyH2.classList.item(1); } </script> |
مثال شماره ۵ : استفاده از متد contains برای چک کردن اینکه آیا یه تگ شامل یک کلاس خاص می باشد یا خیر!؟
میره چک میکنه ببینه آیا مثلا فلان نام کلاس در بین کلاس های موجود در تگ وجود داره یا نه، اگه وجود داشته باشه true به خروجی میفرسته و اگه نباشه false میفرسته
بعدش من به کمک دستور شرطی IF ، گفتم اگه اون کلاسه وجود داشت خب از تگ حذفش کن و اگه وجود نداشت اضافش کن.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function Check(){ var MyTag , Result; MyTag = document.getElementById("myh2"); // چک میکنه که آیا کلاس بی جی وجود داره یا نه if( MyTag.classList.contains("bg") ){ // اینجا خروجی شرط درسته // پس گفتیم حذف کن کلاس بی جی را MyTag.classList.remove("bg"); }else{ // اینجا گفتیم اگه کلاس بی جی وجود نداشت // اضافش کن به تگ MyTag.classList.add("bg"); } } </script> |
مثال شماره ۶ : اضافه کردن همزمان چندین نام کلاس به تگ
|
1 2 3 4 5 6 7 8 9 |
<script> function Add(){ var MyH2 , MyClassList; MyH2 = document.getElementById("myh2"); MyClassList = MyH2.classList.add("RangZamine","RangMatn","Vaasat"); } </script> |
مثال شماره ۷ : حذف کردن همزمان چندین نام کلاس از تگ
|
1 2 3 4 5 6 7 8 9 |
<script> function Remove(){ var MyH2 , MyClassList; MyH2 = document.getElementById("myh2"); MyClassList = MyH2.classList.remove("RangZamine","RangMatn","Vaasat"); } </script> |
مثال شماره ۸ : جایگزین کردن یک نام کلاس با نام کلاس دیگر
|
1 2 3 4 5 6 7 8 9 |
<script> function Replace(){ var MyH2 , MyClassList; MyH2 = document.getElementById("myh2"); MyClassList = MyH2.classList.replace("Rang-1","Rang-2"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| classList | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری ویژگی classList در DOM جاوااسکریپت
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.classList.[ Property ] یا [ Method ]; |
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 ) ، با کلیک بروی دکمه صفحه تاریک میشه و دوباره با کلیک بروی همون دکمه صفحه روشن میشه
|
1 2 3 4 5 6 7 8 9 |
<script> function Night_Mode(){ var MyBody; MyBody = document.getElementById("MyBody"); MyBody.classList.toggle("night-mode"); } </script> |
