این آموزش در تاریخ ۱۴۰۱/۰۴/۲۶ آپدیت شده است.
آموزش متد getElementById در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getElementById در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getElementById در DOM جاوااسکریپت
با استفاده از متد ()getElementById میتونیم تگ های موجود در صفحه رو به راحتی انتخاب و بهشون دسترسی پیدا نماییم. این متد یکی از پرکاربردترین متدهای جاوااسکریپت برای انتخاب تگ ها از صفحه می باشد.
در واقع این متد، یک نوع انتخابگر می باشد که با استفاده از اون میتونیم تگ های درون صفحه رو انتخاب کنیم یا بدست بیاریم و حالا دیگه هرکاری دوس داشتیم روشون پیاده کنیم.
برای ایجاد ID یا آی دی درون یک تگ باید از صفت عمومی ID استفاده کرد.
| مقدار برگشتی | برگشت تگ با ID مشخص شده |
|---|---|
| نسخه DOM | DOM Level 2 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : انتخاب تگ H2 از صفحه که دارای ID بنام Result می باشد بعدش با استفاده از innerHTML متن مشخص شده ای رو داخلش ریختیم.
|
1 2 3 4 5 |
<script> document.getElementById("Result").innerHTML = "فری لرن"; </script> |
مثال شماره ۲ : سه تا تگ با یک ID یکسان وجود دارد ، ولی برنامه فقط بروی اولین ID اعمال خواهد شد. ( پس برای همینه که میگم باید ID منحصر بفرد باشه )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <h2 id="Result"></h2> <h2 id="Result"></h2> <h2 id="Result"></h2> <script> document.getElementById("Result").innerHTML = "فری لرن"; </script> </body> |
مثال شماره ۳ : انتخاب تگ H2 از صفحه و بعدش اعمال چندین دستور CSS ( دادن رنگ زمینه و رنگ متن و وسط قرار دادن متن )
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Set(){ var MyH2; MyH2 = document.getElementById("Result"); MyH2.style.backgroundColor = "#9B8B66"; MyH2.style.color = "#fff"; MyH2.style.textAlign = "center"; } </script> |
مثال شماره ۴ : بدست آوردن مقدار صفت داخل تگ
|
1 2 3 4 5 6 7 8 9 |
<script> function Get(){ var MyTag = document.getElementById("MyImage"); var Result = document.getElementById("Result"); Result.innerHTML = MyTag.src; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()getElementById | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.getElementById( Element_ID ) |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Element_ID | ضروری – ID اون تگی که میخوایم انتخاب کنیم |
Free-Learn
نکات و توضیحات
- همیشه آی دی یا ID که برای یک عنصر انتخاب میکنید، باید یکتا یا منحصر بفرد باشه.
- اگه چندین ID با نام یکسان در صفحه وجود داشته باشه ، عملیات بروی اولین ID اعمال خواهد شد.
- اگه نام ID که انتخاب میکنیم در صفحه وجود نداشته باشد ، در خروجی هیچی یا null برگشت داده خواهد شد ( یعنی عملا هیچی در خروجی نشون نمیده )
