آموزش متد getElementsByClassName در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد 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 می باشد

امتحان کنید

مثال شماره ۲ : چندین کلاس با نام یکسان در صفحه وجود دارد، ولی ما میخوایم از بالا به سمت پایین ۳مین کلاس رو انتخاب کنیم.

امتحان کنید

مثال شماره ۳ : انتخاب چندین کلاس بصورت همزمان ( باید بین کلاس ها ۱عدد فاصله گذاشت )

امتحان کنید

Free-Learn

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

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

نام متد Chrome Firefox Opera Safari IE
()getElementsByClassName بله بله بله بله بله

Free-Learn

شکل نوشتاری

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

  • Index_Number : شماره ایندکس یا جایگاه عنصر در صفحه

Free-Learn

جدول پارامترها

در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.

مقدار توضیح
Class_Name ضروری – کلاس یا Class اون تگی که میخوایم بدست بیاریم یا انتخاب کنیم.
( برای انتخاب چندین کلاس باید بین کلاس ها ۱ عدد فاصله قرار داد )
مثال :

Free-Learn

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

  • موقع انتخاب کلاس باید حتما شماره ایندکس یا Index هم مشخص شود.
  • شماره ایندکس همیشه از ۰ شروع میشه. ( اولین کلاس میشه ۰ و بعدی میشه ۱ و همینطور تابره )
  • برای انتخاب تگ هایی که چندین کلاس بصورت همزمان دارند، باید بین کلاس ها یک عدد فاصله قرار داد.

Free-Learn

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

مثال شماره ۱ : میخوایم با استفاده از حلقه for تمامی تگ هایی که دارای کلاس test می باشند رو انتخاب کنیم و درونشون متن “فری لرن” رو چاپ کنیم، و رنگ متن همشون رو آبی کنیم.

امتحان کنید

Free-Learn

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