این آموزش در تاریخ ۱۴۰۱/۰۴/۲۷ آپدیت شده است.

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

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

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

Free-Learn

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

با استفاده از متد ()getElementsByClassName همونطور که از اسمشم مشخصه، میتونیم تگ هارو از صفحه بر اساس نام کلاسشون انتخاب نماییم.

این متد ۱ پارامتر میگیره که اونم نام کلاسی هست که میخوایم انتخابش کنیم از صفحه ، ولی خب ممکنه ما چندین کلاس با یک نام مشابه داشته باشیم، اونوقت باید چکار کرد؟!

باید شماره جایگاه یا شماره ایندکس ( یا Index ) اون کلاسی که میخوایم انتخاب کنیم رو وارد کنیم، شماره ایندکس هم دیگه باید بدونید همیشه از ۰ شروع میشه تا بی نهایت ( یعنی به تعداد کلاس هایی که در صفحه وجود دارد )

یعنی از بالا ( ابتدای صفحه ) به سمت پایین، ایندکس اولین کلاس میشه ۰ و دومین کلاس میشه ۱ و همینجور تا موقعی که کلاس در صفحه وجود داشته باشد.

با استفاده از متد getElementById میتونیم عناصر رو براساس نام ID انتخاب نماییم.

مقدار برگشتی برگشت یک تگ با Class مشخص شده
نسخه DOM DOM Level 1

Free-Learn

مثال از این متد

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

مثال شماره ۱ : سه تا کلاس با نام Result داریم و میخوایم اونارو انتخاب کنیم و داخلشون یه متن قرار بدیم. ( انتخاب بر اساس شماره ایندکس )

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

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

Free-Learn

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

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

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

Free-Learn

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

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

Free-Learn

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

مثال شماره ۱ : انتخاب دسته جمعی یک نام کلاس مشابه در کل صفحه ( مثلا در کل صفحه ۱۰تا کلاس با نام test داریم ) با استفاده از حلقه for انتخاب دسته جمعی انجام میشه.

امتحان کنید

Free-Learn

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