این آموزش در تاریخ ۱۳۹۹/۱۲/۱۰ آپدیت شده است.
آموزش متد 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 انتخاب کنیم و داخلش متن ” سایت آموزشی فری لرن ” رو قرار بدیم.
|
1 2 3 4 5 6 7 |
<script> var MyH2; MyH2 = document.getElementById("test"); MyH2.innerHTML = "سایت آموزشی فری لرن"; </script> |
مثال شماره ۲ : وقتی چندین ID با نام یکسان وجود داشته باشه، عملیات فقط بروی اولین ID اعمال خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <h2 id="test"></h2> <h2 id="test"></h2> <h2 id="test"></h2> <script> var MyH2; MyH2 = document.getElementById("test"); MyH2.innerHTML = "سایت آموزشی فری لرن"; </script> </body> |
مثال شماره ۳ : انتخاب تگ h2 از صفحه و سپس ریختن متن ” سایت آموزشی فری لرن ” در آن و همچنین اعمال چندین دستور CSS ( دادن رنگ زمینه و رنگ متن و وسط قرار دادن متن )
|
1 2 3 4 5 6 7 8 9 10 |
<script> var MyH2; MyH2 = document.getElementById("test"); MyH2.innerHTML = "سایت آموزشی فری لرن"; MyH2.style.backgroundColor = "#9B8B66"; MyH2.style.color = "#fff"; MyH2.style.textAlign = "center"; </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()getElementById | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.getElementById( Element_ID ) |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Element_ID | ضروری – آی دی یا ID اون تگی که میخوایم بدست بیاریم یا انتخاب کنیم. |
Free-Learn
نکات و توضیحات
- همیشه آی دی یا ID که برای یک عنصر انتخاب میکنید، باید یکتا یا منحصر بفرد باشه.
- اگه چندین ID با نام یکسان در صفحه وجود داشته باشه ، عملیات بروی اولین ID اعمال خواهد شد.
- اگه نام ID که انتخاب میکنیم در صفحه وجود نداشته باشد ، در خروجی هیچی یا null برگشت داده خواهد شد ( یعنی عملا هیچی در خروجی نشون نمیده )
