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

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

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

Free-Learn

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

با استفاده از متد ()getElementById میتونیم به عناصر ( تگ های ) موجود در صفحه به راحتی دسترسی پیدا نماییم. این متد یکی از پرکاربردترین متدهای جاوااسکریپت برای انتخاب یا گرفتن عناصر از صفحه می باشد.

در واقع این متد، یک نوع انتخابگر می باشد که با استفاده از اون میتونیم تگ های درون صفحه رو انتخاب کنیم یا بدست بیاریم و حالا دیگه هرکاری دوس داشتیم روشون پیاده کنیم.

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

خب چرا نباید مثلا ۲ تا ID شبیه هم در صفحه وجود داشته باشه!؟ چون اگه ۲ تا ID یکسان در صفحه وجود داشته باشه، عملیات ما فقط بروی اولین ID اجرا خواهد شد. ( مثال شماره ۲ کمی پایین تر )

برای ایجاد ID یا آی دی درون یک تگ باید از صفت عمومی ID استفاده کرد.

مقدار برگشتی برگشت یک عنصر یا تگ با ID مشخص شده
نسخه DOM Core Level 2 Document Object

Free-Learn

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

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

مثال شماره ۱ : میخوایم تگ H2 که ID یش برابر است با test انتخاب کنیم و داخلش متن ” سایت آموزشی فری لرن ” رو قرار بدیم.

امتحان کنید

مثال شماره ۲ : وقتی چندین ID با نام یکسان وجود داشته باشه، عملیات فقط بروی اولین ID اعمال خواهد شد.

امتحان کنید

مثال شماره ۳ : انتخاب تگ h2 از صفحه و سپس ریختن متن ” سایت آموزشی فری لرن ” در آن و همچنین اعمال چندین دستور CSS ( دادن رنگ زمینه و رنگ متن و وسط قرار دادن متن )

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

Free-Learn

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

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

مقدار توضیح
Element_ID ضروری – آی دی یا ID اون تگی که میخوایم بدست بیاریم یا انتخاب کنیم.

Free-Learn

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

  • همشه آی دی یا ID که برای یک عنصر انتخاب میکنید، باید یکتا یا منحصر بفرد باشه.
  • اگه چندین ID با نام یکسان در صفحه وجود داشته باشه ، عملیات بروی اولین ID اعمال خواهد شد.
  • اگه نام ID که انتخاب میکنیم در صفحه وجود نداشته باشد ، در خروجی هیچی یا null برگشت داده خواهد شد ( یعنی عملا هیچی در خروجی نشون نمیده )

Free-Learn

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