مدل شی گرای سند (Document Object Model)

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

DOM چیست؟

وقتی کلمه DOM را گوگل می کنید احتمالا با این تعریف روبرو می شوید: « مدل شیءگرای سند (DOM – Document Object Model) عنوان یکی از دو معماری اصلی است (در کنار SAX) که بر اساس آن سندهای XML را به اشیایی که در بردارندهٔ آن است تجزیه و آن‌ها را به‌صورت یک ساختار درختی داده‌ها در فضای حافظه اصلی ذخیره می‌کند. DOM نه به زبان برنامه‌نویسی خاصی وابستگی دارد و نه به سکوی برنامه‌نویسی ویژه‌ای، بلکه به منظور اجراء و پیاده‌سازی آن باید از یک زبان برنامه‌نویسی دیگر همچون جاوا، سی‌شارپ، جاوااسکریپت یا مشابه آن‌ها استفاده کرد. آنسوی رابط کاربر سند با مدلی شیءگرا نمایانده می‌شود.»

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

منظور از Document چیست؟ از نظر ما داکیومنت همان صفحه است، نه کل وب سایت؛ یک صفحه تنها. یک صفحه وب می تواند به شکل های مختلفی نمایش داده شود که به طبع همه ما می دانستیم.

به نظر شما کدام یک از تصاویر بالا صفحه وب است؟ طبیعتاً هر دو. یکی نمایش مرورگر و دیگری نمایش کدی یک صفحه است. هر دو یک document هستند که می توانند نمایش متفاوتی داشته باشند. چیزی که مهم است درک کنیم این است که جاوا اسکریپت چگونه یک صفحه یکسان را با نمایش های مختلف درک می کند.

آبجکت در DOM به چه معناست؟

تا اینجای کار مفهوم سند یا همان document را فهمیدیم. حال به عبارت دوم می رسیم: Object. آبجکت در DOM به چه معناست؟

وقتی در رابطه با آبجکت در زبان برنامه نویسی حرف می زنیم، به راحتی می تواند به یک سری از مفاهیم semantic عمیق منجر شود که فعلا اصلا به آن نیازی نداریم. بیایید به شکل دیگری به داستان نگاه کنیم. تاریخ ها آبجکت هستند، آرایه ها آبجکت هستند، حتی من می توانم آبجکت سفارشی خودم را بسازم. آبجکت صرفا یک “چیز” است. هر چیزی که حس یک تکه جدا را بدهد. حتی اگر شامل چیزهای دیگری باشد. برای ما آبجکت به معنای المان (element) است؛ یک تکه مستقل از document. به تگ h1 نگاه کنید، به ul نگاه کنید، اصلا به کل document نگاه کنید، همه اینها آبجکت هستند.

تعریف Model در DOM و جمع بندی نهایی

حالا نوبت به Model در DOM می رسد. قطعا قبلاً فلوچارت یا دیاگرامی را دیده اید که یک مفهوم پیچیده را گرفته و به شکلی ساده نشان دهد. در یک صفحه وب، ما می توانیم هر سند HTML ای را بگیریم و به صورت یک ساختار درختی نشان دهیم، مثل زیر:

در تصویر بالا HTML را می بینیم که شامل یک Body و یک  head  است. Head شامل یک title  است که عنوان صفحه را مشخص می کند. Body هم شامل یک h1 برای عنوان، یک ul برای نگهداری آیتم های لیست و یک تگ p برای پاراگراف است. Ul هم خود شامل سه li  است که آیتم های لیست را مشخص می کنند. ما قادر خواهیم بود که ساختار درختی این داکیومنت را با دیاگرام نشان دهیم.

ما به هر کدام از اینها node می گویم. مثلاً تگ p یک node و تگ body یک node است. ما حتی می توانیم رابطه بین node ها را مشخص کنیم. مثل روابط پدر فرزندی. پس Model در واقع یک سری از کلمات هستند که ما بر سر آنها می توانیم به توافق برسیم یا یک سری استانداردها که می توانیم از آن ها استفاده کنیم.

پس به طور خلاصه مدل شی گرای سند (Document Object Model) یا DOM یک سری استاندارد است که برای بیان چگونگی تعامل خودمان با صفحه وب از آن ها استفاده می کنیم. DOM یک زبان نیست، یک قرارداد است. وقتی DOM را درک کنیم به راحتی می توانیم از جاوا اسکریپت برای دستکاری آن استفاده کنیم.