Document Object Model یا DOM در جاوا اسکریپت چیست

Document Object Model یا DOM

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

یک شی Document ، نشان دهنده سند HTML است که در پنجره مرورگر نمایش داده می شود. شیء Document ، دارای خصیصه های مختلفی است که به اشیاء دیگر اشاره دارند و اجازه دسترسی و اصلاح محتوای سند را می دهند.

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

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

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

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

Legacy DOM - این مدلی است که در نسخه های اولیه زبان جاوا اسکریپت معرفی شد. این مدل به خوبی توسط تمام مرورگرها پشتیبانی می شود ، و فقط اجازه می دهد تا دسترسی به بخش های کلیدی خاصی از اسناد ، مانند فرم ها ، عناصر فرم و تصاویر صورت گیرد.
W3C DOM : این شیء document اجازه دسترسی و اصلاح تمام محتوای سند را می دهد و توسط کنسرسیوم جهانی وب (W3C) ، استاندارد شده است. این مدل تقریباً توسط تمام مرورگرهای مدرن پشتیبانی می شود.
IE4 DOM : این مدل شیء سند در نسخه 4 مرورگر Internet Explorer مایکروسافت معرفی شد. نسخه های IE5 و بالاتر حاوی پشتیبانی از اکثر ویژگی های اصلی 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
}

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

در این مجموعه به آموزش کامل ckeditor از نصب آن تا شخصی سازی و افزودن امکانات اختصاصی به ان می پردازیم.…

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

Document Object Model یا DOM در جاوا اسکریپت چیست

Document Object Model یا DOM

سازگاری DOM

آیا نیاز به مدرک هم دارید؟