آموزش ویژگی id در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی id در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی id در DOM جاوااسکریپت
با استفاده از ویژگی id میتونیم هم مقدار صفت ID یک تگ رو برگردونیم و هم میتونیم براش مقدار جدید تنظیم / ست نماییم.
ما از ID ها هم میتونیم در زبان CSS استفاده نماییم و هم در زبان جاوااسکریپت، در زبان CSS مهم نیست مثلا ۲تا ID نامشون یکسان باشه ولی در زبان جاوااسکریپت مهمه و باید حتما نام ها منحصربفرد باشه.
- در یک صفحه یک تگ فقط میتونه ۱ ( یک عدد ) آی دی یا ID داشته باشد. (مثال)
- در یک صفحه یک تگ میتونه چندین ( بیش از ۲ ) کلاس داشته باشد. (مثال)
- از ID ها نیز در CSS میشه استفاده کرد، یعنی میشه از یک ID درون چندین تگ استفاده کرد سپس با استفاده از CSS به اون تگ ها استایل داد. ( مثال )
- بیشترین استفاده از ID ها در جاوااسکریپت می باشد، و اگه شما در جاوااسکریپت از یک ID با نام یکسان درون چندین تگ استفاده کرده باشید، عملیات فقط بروی اولین تگ اعمال میشه و بروی بقیه هیچ تاثیری ندارد. ( مثال )
- یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
| مقدار برگشتی | یک رشته / متن که نشان دهنده مقدار صفت 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 myp, result; myp = document.getElementById("MyP"); myp.id = "free-learn"; result = document.getElementById("Result"); result.innerHTML = "ID = " + myp.id; } function get(){ var myp , result; myp = document.getElementById("MyP"); result = document.getElementById("Result"); result.innerHTML = "ID = " + myp.id; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| id | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن مقدار
|
1 |
Element.id; |
- تنظیم مقدار جدید
|
1 |
Element.id = " New_Value "; |
Free-Learn
نکات و توضیحات
- از صفت ID بیشتر در زبان جاوااسکریپت استفاده میشه و معمولا برای گرفتن ( یا انتخاب کردن ) عناصر از صفحه از طریق ID میتوان از متد getElementById استفاده کرد.
