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

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

توسط

۱۴۰۰-۰۱-۲۹

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

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی classList در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری ویژگی classList در DOM جاوااسکریپت
5 ویژگی ها
6 متدها
7 نکات و توضیحات
8 مثال های بیشتر

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

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

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

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

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

Free-Learn

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

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

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

<script>

function get(){
 var myH2 , result;
 myH2 = document.getElementById("myh2").classList;
 result = document.getElementById("Result");
 result.innerHTML = myH2;
}

</script>

function get(){

var myH2 , result;

myH2 = document.getElementById("myh2").classList;

result = document.getElementById("Result");

result.innerHTML = myH2;

}

</script>

امتحان کنید

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

<script>

function add(){
 var myH2;
 myH2 = document.getElementById("myh2");
 myH2.classList.add("free-learn"); 
}

function del(){
 var myH2;
 myH2 = document.getElementById("myh2");
 myH2.classList.remove("free-learn"); 
}

</script>

function add(){

var myH2;

myH2 = document.getElementById("myh2");

myH2.classList.add("free-learn");

}

function del(){

var myH2;

myH2 = document.getElementById("myh2");

myH2.classList.remove("free-learn");

}

</script>

امتحان کنید

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

<script>

function toggle(){
 var myH2;
 myH2 = document.getElementById("myh2");
 myH2.classList.toggle("free-learn");
}

</script>

function toggle(){

var myH2;

myH2 = document.getElementById("myh2");

myH2.classList.toggle("free-learn");

}

</script>

امتحان کنید

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

<script>

function get(){
 var myH2 , result;
 myH2 = document.getElementById("myh2").classList.item(1);
 result = document.getElementById("Result");
 result.innerHTML = myH2;
}

</script>

function get(){

var myH2 , result;

myH2 = document.getElementById("myh2").classList.item(1);

result = document.getElementById("Result");

result.innerHTML = myH2;

}

</script>

امتحان کنید

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

<script>

function get(){
 var myH2 , result;
 myH2 = document.getElementById("myh2").classList.contains("test3");
 result = document.getElementById("Result");
 result.innerHTML = myH2;
}

</script>

function get(){

var myH2 , result;

myH2 = document.getElementById("myh2").classList.contains("test3");

result = document.getElementById("Result");

result.innerHTML = myH2;

}

</script>

امتحان کنید

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

<script>

function add(){
 var myH2;
 myH2 = document.getElementById("myh2");
 myH2.classList.add("f1","f2","f3"); 
}

</script>

function add(){

var myH2;

myH2 = document.getElementById("myh2");

myH2.classList.add("f1","f2","f3");

}

</script>

امتحان کنید

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

<script>

function del(){
 var myH2;
 myH2 = document.getElementById("myh2");
 myH2.classList.remove("f1","f2","f3"); 
}

</script>

function del(){

var myH2;

myH2 = document.getElementById("myh2");

myH2.classList.remove("f1","f2","f3");

}

</script>

امتحان کنید

Free-Learn

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

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

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

Free-Learn

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

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

Element.classList [ Property ] یا [ Method ];

1	Element.classList [ Property ] یا [ Method ];

Free-Learn

ویژگی ها

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

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

Free-Learn

متدها

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

مقدار

توضیح

add(“class1”)

برای اضافه کردن یک یا چندین نام کلاس
* برای اضافه کردن چندین کلاس بصورت همزمان

classList.add("f1","f2","f3");

1	classList.add("f1","f2","f3");

* اگه نام کلاس از قبل وجود داشته باشه دیگه اضافه نمیشه

contains(“class”)

مشخص میکند که آیا کلاس های یک تگ ،
شامل یک نام مشخص شده می باشد یا خیر

item(“index”)

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

remove(“class1”)

برای حذف کردن یک یا چندین نام کلاس
* برای حذف کردن چندین کلاس بصورت همزمان

classList.remove("f1","f2","f3");

1	classList.remove("f1","f2","f3");

* اگه نام کلاس وجود نداشته باشه هیچ ارور یا خطایی نمیده

toggle(“class”)

برای جابه جایی بین نام کلاس ها
اگه کلاس وجود نداشت ، اضافش میکنه و true برمیگردونه
اگه کلاس وجود داشت حذفش میکنه و false برمیگردونه

Free-Learn

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

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

Free-Learn

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

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

/* دکمه حالت شب */
a.btn-night{
 position:fixed;
 left:10px;
 bottom:10px;
}

/* استایل برای حالت شب */
body.night-mode{
 background-color:#2f2d2d;
 color:#fff;
}

body.night-mode a{
 color:yellow;
}

/* دکمه حالت شب */

a.btn-night{

position:fixed;

left:10px;

bottom:10px;

}

/* استایل برای حالت شب */

body.night-mode{

background-color:#2f2d2d;

color:#fff;

}

body.night-mode a{

color:yellow;

}

function toggle_mode(){
 var mybody;
 mybody = document.getElementById("MyBody");
 mybody.classList.toggle("night-mode");
}

function toggle_mode(){

var mybody;

mybody = document.getElementById("MyBody");

mybody.classList.toggle("night-mode");

}

امتحان کنید

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

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

body.night-mode [Class | ID | TagName]{
 //دستورات سی اس اس
}

body.night-mode [Class | ID | TagName]{

//دستورات سی اس اس

}

مثال :

body.night-mode .test{
 //دستورات سی اس اس
}

یا

body.night-mode #test{
 //دستورات سی اس اس
}

یا

body.night-mode p{
 //دستورات سی اس اس
}

body.night-mode .test{

//دستورات سی اس اس

}

یا

body.night-mode #test{

//دستورات سی اس اس

}

یا

body.night-mode p{

//دستورات سی اس اس

}

Free-Learn

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