آموزش متد getElementsByClassName در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getElementsByClassName در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getElementsByClassName در DOM جاوااسکریپت
با استفاده از متد ()getElementsByClassName همونطور که از اسمش مشخصه، میتونیم عناصر رو از صفحه بر اساس نام کلاسشون انتخاب نماییم و برای دسترسی به عناصر باید از شماره ایندکس یا Index استفاده نماییم.
این متد ۱ پارامتر میگیره که اونم نام کلاسی هست که میخوایم بدستش بیاریم و یا انتخابش کنیم از صفحه ، ولی خب ممکنه ما چندین کلاس با یک نام مشابه داشته باشیم باید چکار کرد؟!
باید شماره ایندکس ( یا Index ) اون کلاسی که میخوایم بدستش بیاریم رو وارد کنیم، شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه تا بی نهایت ( یعنی به تعداد کلاس هایی که در صفحه وجود دارد )
یعنی از بالا ( ابتدای صفحه ) به سمت پایین، ایندکس اولین کلاس میشه ۰ و دومین کلاس میشه ۱ و همینجور تا موقعی که کلاس در صفحه وجود داشته باشد.
با استفاده از متد getElementById میتونیم عناصر رو براساس نام ID انتخاب نماییم.
| مقدار برگشتی | برگشت یک عنصر یا تگ با Class مشخص شده |
|---|---|
| نسخه DOM | Core Level 1 Document Object |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : انتخاب کلاس free-learn که در تگ H2 می باشد
|
1 2 3 4 5 6 7 |
<script> var MyH2; MyH2 = document.getElementsByClassName("free-learn")[0]; MyH2.innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۲ : چندین کلاس با نام یکسان در صفحه وجود دارد، ولی ما میخوایم از بالا به سمت پایین ۳مین کلاس رو انتخاب کنیم.
|
1 2 3 4 5 6 7 |
<script> var MyH2; MyH2 = document.getElementsByClassName("free-learn")[2]; MyH2.innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۳ : انتخاب چندین کلاس بصورت همزمان ( باید بین کلاس ها ۱عدد فاصله گذاشت )
|
1 2 3 4 5 6 7 |
<script> var MyH2; MyH2 = document.getElementsByClassName("free-learn1 free-learn2")[0]; MyH2.innerHTML = "سایت آموزشی فری لرن"; </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()getElementsByClassName | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.getElementsByClassName( Class_Name )[ Index_Number ] |
- Index_Number : شماره ایندکس یا جایگاه عنصر در صفحه
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| Class_Name | ضروری – کلاس یا Class اون تگی که میخوایم بدست بیاریم یا انتخاب کنیم. ( برای انتخاب چندین کلاس باید بین کلاس ها ۱ عدد فاصله قرار داد ) مثال :
|
Free-Learn
نکات و توضیحات
- موقع انتخاب کلاس باید حتما شماره ایندکس یا Index هم مشخص شود.
- شماره ایندکس همیشه از ۰ شروع میشه. ( اولین کلاس میشه ۰ و بعدی میشه ۱ و همینطور تابره )
- برای انتخاب تگ هایی که چندین کلاس بصورت همزمان دارند، باید بین کلاس ها یک عدد فاصله قرار داد.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : میخوایم با استفاده از حلقه for تمامی تگ هایی که دارای کلاس test می باشند رو انتخاب کنیم و درونشون متن “فری لرن” رو چاپ کنیم، و رنگ متن همشون رو آبی کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function SetColor() { var MyH2 , i; MyH2 = document.getElementsByClassName("test"); for ( i = 0; i < MyH2.length; i++ ) { MyH2[i].innerHTML = "فری لرن"; MyH2[i].style.color = "blue"; } } </script> |
