این آموزش در تاریخ ۱۴۰۱/۰۵/۱۹ آپدیت شده است.
آموزش ویژگی id در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی id در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی id در DOM جاوااسکریپت
با استفاده از ویژگی id میتونیم هم مقدار صفت ID یک تگ رو بدست آوریم و هم میتونیم براش مقدار جدید تنظیم / ست نماییم.
از ID ها هم میشه در CSS و هم در جاوا اسکریپت استفاده کرد و محدودیتی هم وجود نداره، ولی از ID ها بیشتر در زبان جاوا اسکریپت استفاده میشه و در زبان CSS باز بیشتر از کلاس ( Class ) استفاده میشه. ( مشاهده تفاوت های ID با Class )
| مقدار برگشتی | برگشت مقدار صفت ID موجود در تگ |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه، مقدار صفت ID رو بدست میاریم و با کلیک بروی دکمه دیگر ، مقدار جدید براش تنظیم میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function Set(){ var MyTag, Result; MyTag = document.getElementById("MyP"); MyTag.id = "NewID"; Result = document.getElementById("Result"); Result.innerHTML = "ID = " + MyTag.id; } function Get(){ var MyTag , Result; MyTag = document.getElementById("MyP"); Result = document.getElementById("Result"); Result.innerHTML = "ID = " + MyTag.id; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| id | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن مقدار
|
1 |
Element.id; |
- تنظیم مقدار جدید
|
1 |
Element.id = " New_Value "; |
Free-Learn
نکات و توضیحات
- همونطور که اشاره کردم از صفت ID بیشتر در زبان جاوا اسکریپت استفاده میشه ،دلیل اصلی استفادشم انتخاب یا گرفتن تگ ها از صفحه هست ( با استفاده از متد getElementById )
