مدل اشیای سند یا DOM، تمام اشياي صفحه (تگ ها) را بصورت سلسله مراتبي شامل مي شود. هر كدام از اشيا داراي خواص و متدهاي مربوط به خود مي باشند. برنامه نویس جاوااسکریپت به این اشیاء دسترسی پیدا کرده، خواص آنها را استفاده کرده و گاها” تغییر دهد، متدهای آنها را اجرا کند و نیز اشیای مشابهی به آن اضافه نماید.
در جلسه قبل با مدل اشیای مرورگر اشنا شدید، در این جلسه مدل اشیای سند، خصوصیات مهم و متدهای اشیای مهم صفحه وب را آموزش می دهیم.
شیء Anchor
این شیء به تگ های پیوند (A) در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| href | آدرس (URL) |
| innerHTML | کد HTML داخل تگ A |
| target | نام پنجره میزبان |
* هرکدام از تگ های دارای تگ شروع و پایان دارای خاصیت InnerHTML هستند که کد HTML داخل آنها را تعیین می کند.
شیء Image
این شیء به تگ های تصویر (IMG) در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| align | ترازبندی (مقدار left,right,center) |
| alt | متن جایگزین |
| height | ارتفاع تصویر |
| width | عرض تصویر |
| src | آدرس و نام فایل تصویری |
| border | ضخامت کادر تصویر |
| complete | وضعیت کامل شدن دریافت تصویر (true,false) |
شیء Form
این شیء به تگ های فرم (Form) در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| action | آدرس و نام برنامه پردازنده فرم |
| method | شیوه ارسال |
| elements[] | آرایه ای شامل اجزای فرم |
متدها:
| نام متد | کاربرد |
| reset() | پاک کردن فرم |
| submit() | ارسال فرم |
شیء Input
این شیء به تگ های INPUT در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| checked | وضعیت انتخاب جعبه انتخابی مخصوص دکمه رادیویی و جعبه انتخاب |
| Value | مقدار کنترل ورودی |
| disabled | وضعیت فعال یا غیرفعال بودن کنترل |
متدها:
| نام متد | کاربرد |
| focus() | انتقال کنترل به دکمه |
| blur() | خروج کنترل از دکمه |
| click() | شبیه سازی عمل کلیک روی دکمه |
شیء Select
این شیء به تگ های SELECT در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| length | تعداد گزینه های لیست |
| size | اندازه (تعداد گزینه های قابل نمایش) |
| selectedIndex | اندیس گزینه انتخاب شده |
| options[] | آرایه ای حاوی گزینه های لیست |
متدها:
| نام متد | کاربرد |
| focus () | انتقال کنترل به لیست |
| blur() | خروج کنترل از لیست |
| add() | اضافه کردن گزینه به لیست |
| remove() | حذف کردن گزینه از لیست remove(index) |
شیء Table
این شیء به تگ های TABLE در صفحه اشاره دارد
خواص:
| خاصیت | کاربرد |
| width | عرض جدول |
| border | ضخامت کادر جدول |
| rows[] | آرایه ای شامل اشیای برای سطرهای جدول |
| cells [] | آرایه ای حاوی اشیایی برای سلول های جدول |
خاصیت style
هر کدام از اشیای قابل نمایش در صفحه علاوه و خواص اصلی شان دارای یک خاصیت بنام style هستند که آن هام شامل مجموعه ای از صفات برای تنظیم خصوصیات ظاهری اشیا است. این خواص بصورت زیر استفاده می شوند:
Object.style.property = value
| خاصیت | کاربرد | |
| backgroundColor | رنگ پس زمینه | |
| backgroundImage | تصویر پس زمینه | |
| border | نوع و ضخامت و رنگ کادر | |
| borderBottom | نوع و ضخامت و رنگ کادر پائین | |
| borderTop | نوع و ضخامت و رنگ کادر بالا | |
| borderLeft | نوع و ضخامت و رنگ کادر چپ | |
| borderRight | نوع و ضخامت و رنگ کادر راست | |
| height | ارتفاع | |
| width | عرض | |
| color | رنگ متن برای اشیای متنی | |
| fontFamily | نام قلم برای اشیای متنی | |
توابع کاربردی جاوا اسکریپت
جاوا اسکریپت دارای مجموعه ای کامل از توابع در زمینه محاسباتی، رشته ها، تاریخ و… می باشد مثل:
abs(x) : محاسبه قدرمطلق x
ceil(x) : محاسبه کف
floor(x) : محاسبه سقف
sqrt(x) : محاسبه جذر
eval(s) : ارزشیابی رشته بعنوان یک عبارت محاسباتی
isFinite(s) : بررسی اینکه رشته یک عدد متناهی است یا خیر
parsInt(s) : تبدیل رشته به عدد صحیح
parsFloat(s): تبدیل رشته به عدد اعشاری