آموزش ویژگی images در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی images در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی images در DOM جاوااسکریپت
با استفاده از ویژگی images میتونیم به تصاویر ( چیزی که با استفاده از تگ img در صفحه ایجاد شده باشه ) دسترسی پیدا نماییم ، دسترسی هم به خوده تصاویر و هم به صفات تصاویر.
این ویژگی نمیتواند به <input> هایی که نوع image دارند دسترسی پیدا نماید، بلکه فقط به تگ های img میتواند دسترسی پیدا نماید.
| مقدار برگشتی | برگشت یک شئ از تصاویر موجود در صفحه |
|---|---|
| نسخه DOM | Core Level 1 Document Object |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : میخوایم با استفاده از ویژگی length تعداد کل تصاویر ( تگ img ) که درون صفحه قرار دارند رو بدست آوریم.
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Tedad_Tasavir(){ var myimg , result; myimg = document.images.length; result = document.getElementById("Result"); result.innerHTML = "تعداد کل تصاویر موجود در صفحه = " + myimg ; } </script> |
مثال شماره ۲ : انتخاب دومین تصویر از بین ۳ تصویر موجود در صفحه ( انتخاب بر اساس شماره ایندکس یا جایگاه )
|
1 2 3 4 5 6 7 8 9 |
<script> function get_img(){ var myimg; myimg = document.images[1]; myimg.style.border = "2px solid red"; } </script> |
مثال شماره ۳ : میخوایم با کلیک بروی یک دکمه ، مقدار صفت src و alt و title رو از تصویر موجود در صفحه بدست آوریم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function get_info(){ var myimg , msrc , malt , mtitle ,result; myimg = document.images[0]; result = document.getElementById("Result"); msrc = myimg.src; malt = myimg.alt; mtitle = myimg.title; result.innerHTML = "Src = " + msrc + "<br>" + "Alt = " + malt + "<br>" + "Title = " + mtitle; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| images | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
document.images; |
Free-Learn
ویژگی ها
در جدول زیر میتوانید ویژگی های قابل استفاده در images رو مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| length | برای بدست آوردن تعداد ( کل ) تصاویر موجود در صفحه ( مثال ) |
Free-Learn
متدها
در جدول زیر میتوانید متدهای قابل استفاده در images رو مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| [index] | بدست آوردن تصاویر موجود در صفحه ، با استفاده از شماره ایندکس یا Index تصویر ( مثال ) |
| item(index) | بدست آوردن تصاویر موجود در صفحه ، با استفاده از شماره ایندکس یا Index تصویر ( مثال ) |
| namedItem(id) | بدست آوردن تصاویر موجود در صفحه ، با استفاده از آی دی یا ID تصویر ( مثال ) |
Free-Learn
نکات و توضیحات
- انتخاب براساس شماره ایندکس یا Index ( یا شماره جایگاه ) یعنی اینکه اون تگ img در صفحه در جایگاه چندم قرار داره، یعنی اگه کل تصاویر موجود در صفحه ۵ عدد باشه. شماره ایندکس از ۰ شروع میشه تا هرتعداد که تصویر باشه. ( یعنی اولین تصویر شماره ایندکسش میشه ۰ و دومی میشه ۱ و.. )
- اگه شماره ایندکس خارج از محدوده باشه، هیچی یا null برگشت داده میشه. ( بفرض مثال ما ۳ تا img در صفحه داریم بعد اومدیم شماره ایندکس دادیم ۴ )
