این آموزش در تاریخ ۱۴۰۱/۰۴/۲۸ آپدیت شده است.
آموزش ویژگی images در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی images در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی images در DOM جاوااسکریپت
با استفاده از ویژگی images میتونیم به تصاویر/ عکس های داخل صفحه دسترسی پیدا کنیم. ( یه عکس با استفاده از تگ img در صفحه ایجاد میشه )
این ویژگی نمیتواند به <input> هایی که نوع image دارند دسترسی پیدا نماید، بلکه فقط به تگ img میتواند دسترسی پیدا نماید.
| مقدار برگشتی | برگشت شئ عکس های موجود در صفحه |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : میخوایم با استفاده از ویژگی length تعداد کل تصاویر ( تگ img ) که درون صفحه قرار دارند رو بدست آوریم.
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Tedad_Tasavir(){ var MyImage , Result; MyImage = document.images.length; Result = document.getElementById("Result"); Result.innerHTML = "تعداد کل تصاویر = " + MyImage; } </script> |
مثال شماره ۲ : انتخاب دومین تصویر از بین ۴ تصویر موجود در صفحه ( انتخاب بر اساس شماره ایندکس یا Index )
|
1 2 3 4 5 6 7 8 |
<script> function GetImage(){ var MyImage = document.images[1]; MyImage.style.border = "2px solid red"; } </script> |
مثال شماره ۳ : بدست آوردن مقدار صفت های src و alt و title از یک عکس
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Get_Info(){ var MyImage , Result; MyImage = document.images[0]; Result = document.getElementById("Result"); Result.innerHTML = "Src = " + MyImage.src + "<br>" + "Alt = " + MyImage.alt + "<br>" + "Title = " + MyImage.title; } </script> |
مثال شماره ۴ : بدست آوردن آدرس URL تمامی عکس های موجود در صفحه به کمک حلقه For
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> function Get_URL(){ var MyImage = document.images; var Result = ""; var i; for( i = 0; i < MyImage.length; i++ ){ Result = Result + MyImage[i].src + "<br>"; } document.getElementById("Result").innerHTML = Result; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| 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 در صفحه داریم بعد اومدیم شماره ایندکس دادیم ۴ )
