هر صفحه وب در یک پنجره مرورگر قراردارد که می تواند به عنوان یک شیء در نظر گرفته شود. یک شیء Document نشان دهنده سند HTML است که در آن پنجره نمایش داده می شود. شی Document دارای چندین ویژگی است که به دیگر اشیا رجوع کرده و اجازه دستیابی و اصلاح محتوای سند را می دهد.

روشی که محتوای سند قابل دستیابی و اصلاح میشود را Document Object Model یا DOM می نامند. اشیا در یک سلسله مراتب سازماندهی شده اند. این ساختار سلسله مراتبی برای سازماندهی اشیاء در یک سند وب اجرا می شوند.

  • شیء Window: راس سلسله مراتب قرار دارد. دورترین عنصر سلسله مراتب شیء است.
  • شیءDocument: هر سند HTML که در پنجره بارگذاری شود یک شی سند است. سند شامل محتوای صفحه است.
  • شیء Form: هرچیزی که در تگ <form>…</form> قرار داشته باشد، شیء فرم را تعیین می کند.
  • عناصر کنترل فرم: شی فرم شامل تمام عناصری است که برای آن شی تعریف شده، مثل فیلدهای متنی، گزینه ها، گزینه های رادیویی و چک باکس ها.

در اینجا ساختار سلسله مراتبی ساده ای از چند شیء مهم قرار دارد:

چندین DOM وجود دارد. در بخش های بعد درمورد جزییات هرکدام از DOMها و روش استفاده آن برای دستیابی و اصلاح سند توضیح داده خواهد شد.

  • Legacy DOM: این مدل که در نسخه های اولیه زبان جاوا اسکریپت معرفی شده بود، به خوبی توسط تمام مرورگرها پشتیبانی میشود، اما فقط اجازه دستیابی به بخش های معینی از اسناد را می یدهد، مثل فرم ها، عناصر و عکس ها.
  • W3C DOM: این مدل شیء سند اجازه دستیابی و اصلاح تمام محتوای سند را فراهم می کند و توسط کنسرسیوم جهانی وب استاندارد شده (W3C). این مدل تقریبا توسط تمام مرورگرهای مدرن پشتیبانی می شود.
  • IE4 DOM: این مدل شیء سند در ورژن ۴ مرورگر اینترنت اکسپلورر معرفی شد. IE 5 و ورژن های بعدی شامل پشتیبانی برای اکثر ویژگی های W3C DOM می شوند.

سازگاری DOM

اگر بخواهید اسکریپتی انعطاف پذیر برای استفاده از W3C DOM  یا  IE 4 DOM بسته به نوع توانایی شان، بنویسید، می توانید از یک دیدگاه capability-testing استفاده کنید که ابتدا وجود یک متد یا ویژگی را ارزیابی کرده  تا قابلیت مورد انتظار آن را بررسی کند. به عنوان مثال:

if (document.getElementById) {
   // If the W3C method exists, use it
} else if (document.all) {
   // If the all[] array exists, use it
} else {
   // Otherwise use the legacy DOM
}