این آموزش در تاریخ ۱۴۰۱/۰۴/۲۷ آپدیت شده است.
آموزش متد getElementsByClassName در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getElementsByClassName در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getElementsByClassName در DOM جاوااسکریپت
با استفاده از متد ()getElementsByClassName همونطور که از اسمشم مشخصه، میتونیم تگ هارو از صفحه بر اساس نام کلاسشون انتخاب نماییم.
این متد ۱ پارامتر میگیره که اونم نام کلاسی هست که میخوایم انتخابش کنیم از صفحه ، ولی خب ممکنه ما چندین کلاس با یک نام مشابه داشته باشیم، اونوقت باید چکار کرد؟!
باید شماره جایگاه یا شماره ایندکس ( یا Index ) اون کلاسی که میخوایم انتخاب کنیم رو وارد کنیم، شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه تا بی نهایت ( یعنی به تعداد کلاس هایی که در صفحه وجود دارد )
یعنی از بالا ( ابتدای صفحه ) به سمت پایین، ایندکس اولین کلاس میشه ۰ و دومین کلاس میشه ۱ و همینجور تا موقعی که کلاس در صفحه وجود داشته باشد.
با استفاده از متد getElementById میتونیم عناصر رو براساس نام ID انتخاب نماییم.
| مقدار برگشتی | برگشت یک تگ با Class مشخص شده |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : سه تا کلاس با نام Result داریم و میخوایم اونارو انتخاب کنیم و داخلشون یه متن قرار بدیم. ( انتخاب بر اساس شماره ایندکس )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <h2 class="Result"></h2> <h2 class="Result"></h2> <h2 class="Result"></h2> <script> document.getElementsByClassName("Result")[0].innerHTML="سلام خوبی؟"; document.getElementsByClassName("Result")[1].innerHTML="به سایت آموزشی فری لرن"; document.getElementsByClassName("Result")[2].innerHTML="خوش اومدی"; </script> </body> |
مثال شماره ۲ : انتخاب همزمان چندین نام کلاس ( باید بین نام کلاس ها ۱عدد فاصله گذاشت )
|
1 2 3 4 5 6 7 |
<script> var MyH2; MyH2 = document.getElementsByClassName("MyClass_1 MyClass_2")[0]; MyH2.style.color = "red"; </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()getElementsByClassName | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.getElementsByClassName( Class_Name )[ Index_Number ] |
- Class_Name : نام کلاس
- Index_Number : شماره ایندکس یا جایگاه تگ در صفحه
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| Class_Name | ضروری – نام اون کلاس یا Class که میخوایم انتخابش کنیم ( برای انتخاب چندین کلاس باید بین کلاس ها ۱ عدد فاصله قرار داد ) مثال :
|
Free-Learn
نکات و توضیحات
- موقع انتخاب کلاس باید حتما شماره ایندکس یا Index هم مشخص شود.
- شماره ایندکس همیشه از ۰ شروع میشه. ( اولین کلاس میشه ۰ و بعدی میشه ۱ و همینطور تابره )
- برای انتخاب تگ هایی که چندین کلاس بصورت همزمان دارند، باید بین کلاس ها یک عدد فاصله قرار داد.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : انتخاب دسته جمعی یک نام کلاس مشابه در کل صفحه ( مثلا در کل صفحه ۱۰تا کلاس با نام test داریم ) با استفاده از حلقه for انتخاب دسته جمعی انجام میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Set() { var MyH2 , i; MyH2 = document.getElementsByClassName("MyClass"); for( i = 0; i < MyH2.length; i++ ){ MyH2[i].style.backgroundColor = "#000"; MyH2[i].style.color = "#fff"; MyH2[i].style.textAlign = "center"; } } </script> |
