آموزش جاوا اسکریپت

آموزش جاوا اسکریپت - سند مدل شی یا DOM

هر صفحه وب داخل یک پنجره مرورگر است که می تواند به عنوان یک شیء در نظر گرفته شود.

یک Document object  (سند شئ) نشان دهنده سند HTML است که در آن پنجره نمایش داده می شود. Document object  دارای خاصیت های مختلفی می باشد، به سایر اشیا اشاره دارد که اجازه دسترسی و اصلاح محتوای سند را می دهد.

نحوه دسترسی به محتوای سند و اصلاح آن، مدل Document Object یا DOM ی باشد. اشیا در سلسله مراتب سازماندهی می گردند. این ساختار سلسله مراتبی به سازماندهی اشیاء در یک Web document (سند وب) اعمال می شود.

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

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

html dom

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

  • Legacy DOM، این مدل در نسخه های اولیه زبان جاوا اسکریپت معرفی شد. به خوبی توسط تمام مرورگرها پشتیبانی می شود، اما اجازه دسترسی به بخش های کلید های خاصی از اسناد مانند فرم ها، عناصر فرم و تصاویر را فراهم می آورد.
  • W3C DOM، این مدل شیء سند امکان دسترسی و اصلاح تمام محتوای سند را فراهم می کند و توسط کنسرسیوم جهانی وب (W3C) استاندارد شده است. این مدل تقریبا توسط تمام مرورگرهای مدرن پشتیبانی می شود.
  • IE4 DOM، این مدل سند شئ در نسخه 4 مرورگر اینترنت اکسپلورر مایکروسافت معرفی شد. نسخه های 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
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش جاوا اسکریپت

Learn JavaScript

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...