تصور کنید یک صفحه وبسایت را به وسیله html و CSS ساخته و طراحی کرده اید. تصمیم میگیرید که بخش هایی از این صفحه را به وسیله java script تغییر دهید. بعنوان مثال بخواهید قسمتی از متن های موجود در تگ های HTML تغییر کند. حتما برایتان سوال شده است که چگونه میتوانید به این تگ ها دسترسی پیدا کرده و ان ها را تغییر دهید و نیز سوالات دیگر که ممکن است پیش بیاید.
پاسخ تمام سوالاتی که در ذهن شما ایجاد میشود در DOM میباشد. در اصل DOM (Document Object Model) نقش یک رابط را ایفا میکند که میتوانید به وسیله ان به تمامی عناصر صفحه وبسایت دسترسی پیدا کرده و تغییراتی که میخواهید را انجام دهید. DOMنمایش داده های اشیاء است که ساختار و محتوای یک سند را در وب تشکیل میدهد. "DOM" رابطی برای صفحات وب است. در اصل به برنامه ها این اجازه را میدهد که محتوا، ساختار و سبک های یک صفحه را بخوانند و دستکاری کنند.
DOM کاربردهای مهمی دارد، از جمله:
- Documentها را تشکیل دهد.
- ساختار این Documentها را کنترل کند.
- نیز میتواند محتوا را تغییر دهد یا پاک کند و حتی به آن اضافه کند.
DOM یک نمایه مبتنی بر شیء از سند منبع HTML است و بعنوان یک رابط برنامه نویسی میباشد. در واقع DOM تلاش میکند که ساختار و محتوای سند HTML را به یک الگوی شئ (object model) تبدیل کند که توسط برنامه های متفاوت قابل استفاده باشد. ساختار شیء DOM توسط یک درخت گره (Node Tree) نمایش داده میشود.
علت اینکه به node tree نامیده شده است این است که مانند یک درخت که یک تنه (parent) اصلی دارد و تعدادی شاخه (child) دارد و هرکدام از این شاخه ها برگ هایی نیز دارند. در این حالت تنه که بعنوان والدین (parent) است، عنصر اصلی <html> میباشد. شاخه ها که بچه ها(child) هستند، عناصر تودرتو و پیچیده آن به حساب می آیند و برگ ها(leaves) محتوای درون این عناصر میباشند. به یک نمونه از یک HTML document که در زیر امده است دقت کنید:
|
lang="en">
Hello, world! How are you?
|
این document میتواند به صورت node tree زیر نمایش داده شود:
علی رغم اینکه DOM از منبع سند HTML (Source HTML document) ایجاد شده است، اما همیشه دقیقاً یکسان نیست. دو نمونه وجود دارد که در آن DOM می تواند متفاوت از منبع HTML باشد:
- هنگامی که HTML معتبر نیست:
DOM یک رابط برای اسناد معتبر HTML است. در طی فرایند ایجاد DOM، مرورگر ممکن است برخی از عدم اعتبارات موجود در کد HTML را تصحیح کند.
به سند HTML زیر به عنوان نمونه توجه کنید:
|
Hello, world!
|
<head> و <body> که از قسمت های جداناپذیر یک سند HTML هستند در این سند وجود ندارند. اگر به Dom tree به دست آمده نگاه کنید میبینید که این موضوع تصحیح شده است:
- هنگامی که DOM توسط Javascript تغییر پیدا میکند:
علاوه بر اینکه رابط کاربری برای مشاهده محتوای یک سند HTML است،DOM نیز می تواند اصلاح شود و آن را به یک منبع زنده تبدیل کند.
به عنوان مثال ، ما می توانیم با استفاده از Javascript گره های بیشتری به DOM اضافه کنیم:
|
var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I'm new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph); |
این DOM را به روز می کند ، اما البته نه سند HTML را!
Dom یک مدل منطقی میباشد و میتواند به هر روشی انجام شود و لزومی ندارد که حتما documentها به صورت node tree پیاده شوند و جالب است بدانید برای انواع زبان های برنامه نویسی قابل استفاده است و همانطور که گفته شد با DOM میتوانید هرچیزی را که در HTML و XML وجود داشته باشد به آن دسترسی پیدا کنید و تغییراتی در آن ایجاد کنید.
اولین نفری باشید که نظر می دهد!