DOM چیست؟

2 تیر, 1402

بدون دیدگاه

Document Object Model (DOM) نمایش داده‌های اشیایی است که ساختار و محتوای یک سند را در وب تشکیل می‌دهند. در این مقاله DOM را معرفی خواهیم کرد.

Document Object Model (DOM) یک رابط برنامه نویسی برای اسناد HTML (HyperText Markup Language) و XML (زبان نشانه گذاری توسعه پذیر) است. ساختار منطقی اسناد و نحوه دسترسی و دستکاری یک سند را تعریف می کند.

نکته: ساختار منطقی نامیده می شود زیرا DOM هیچ رابطه ای را بین اشیا مشخص نمی کند.

DOM راهی است برای نمایش صفحه وب به روشی سلسله مراتبی ساختاریافته به طوری که برای برنامه نویسان و کاربران آسان تر می شود تا در سند سر بخورند. با DOM، می‌توانیم به راحتی به تگ‌ها، شناسه‌ها، کلاس‌ها، ویژگی‌ها یا عناصر HTML با استفاده از دستورات یا روش‌های ارائه‌شده توسط شی Document دسترسی داشته باشیم و آن‌ها را دستکاری کنیم. با استفاده از DOM، جاوا اسکریپت به HTML و همچنین CSS صفحه وب دسترسی پیدا می کند و همچنین می تواند رفتاری را به عناصر HTML اضافه کند. بنابراین اساساً Document Object Model یک API است که اسناد HTML یا XML را نشان می دهد و با آنها تعامل دارد.

حال چرا DOM موردنیاز است؟

HTML برای ساختار صفحات وب و جاوا اسکریپت برای افزودن رفتار به صفحات وب ما استفاده می شود. هنگامی که یک فایل HTML در مرورگر بارگذاری می شود، جاوا اسکریپت نمی تواند به طور مستقیم سند HTML را درک کند. بنابراین، یک سند مربوطه ایجاد می شود (DOM). DOM اساساً نمایش همان سند HTML است اما در قالبی متفاوت با استفاده از اشیاء. جاوا اسکریپت DOM را به راحتی تفسیر می کند، یعنی جاوا اسکریپت نمی تواند تگ ها (<h1>H</h1>) را در سند HTML درک کند اما می تواند شی h1 را در DOM درک کند. اکنون جاوا اسکریپت می تواند با استفاده از توابع مختلف به هر یک از اشیاء (h1، p و غیره) دسترسی داشته باشد.

ساختار DOM: DOM را می توان به عنوان یک درخت یا جنگل (بیش از یک درخت) در نظر گرفت. اصطلاح مدل ساختار گاهی اوقات برای توصیف نمایش درخت مانند یک سند استفاده می شود. هر شاخه از درخت به یک گره ختم می‌شود و هر گره حاوی اشیایی است که شنوندگان رویداد را می‌توان به گره‌ها اضافه کرد و در صورت وقوع یک رویداد معین راه‌اندازی کرد. یکی از ویژگی‌های مهم مدل‌های ساختار DOM، ایزومورفیسم ساختاری است: اگر از هر دو پیاده‌سازی DOM برای ایجاد نمایشی از یک سند استفاده شود، آنها همان مدل ساختاری را با اشیا و روابط یکسان ایجاد خواهند کرد.

چرا یک مدل‌شی نامیده میشود؟

اسناد با استفاده از اشیاء مدل‌سازی می‌شوند و این مدل نه تنها ساختار یک سند را شامل می‌شود، بلکه رفتار یک سند و اشیایی که از آن مانند عناصر برچسب با ویژگی‌هایی در HTML تشکیل شده‌اند را نیز شامل می‌شود.

ویژگی‌های DOM: بیایید ویژگی‌های شیء سند را ببینیم که می‌تواند توسط شیء سند قابل دسترسی و اصلاح باشد.

Window Object: یک شی پنجره، یک شی از مرورگر است که همیشه در بالای سلسله مراتب قرار دارد. این مانند یک API است که برای تنظیم و دسترسی به تمام ویژگی ها و روش های مرورگر استفاده می شود. به طور خودکار توسط مرورگر ایجاد می شود.

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

Form Object: با تگ های فرم نمایش داده می شود.

Link Object: با تگ های پیوند نشان داده می شود.

Anchor Object: با یک تگ href نمایش داده می شود.
عناصر کنترل فرم: فرم می تواند عناصر کنترلی زیادی مانند فیلدهای متنی، دکمه ها، دکمه های رادیویی، چک باکس ها و غیره داشته باشد.

DOM چه نمیباشد؟

Document Object Model یک توصیف باینری نیست که هیچ کد منبع باینری را در رابط های خود تعریف نکند.
Document Object Model برای توصیف اشیاء در XML یا HTML استفاده نمی شود در حالی که DOM اسناد XML و HTML را به عنوان اشیا توصیف می کند.
مدل شیء سند با مجموعه ای از ساختارهای داده نشان داده نمی شود. این یک رابط است که نمایش شی را مشخص می کند.
Document Object Model بحرانی بودن اشیاء در اسناد را نشان نمی دهد، یعنی اطلاعاتی در مورد اینکه کدام شی در سند با زمینه مناسب است و کدام یک مناسب نیست، ندارد.

سطوح DOM

سطح ۰: مجموعه ای از رابط های سطح پایین را ارائه می دهد.

سطح ۱: سطح ۱ DOM را می توان در دو بخش CORE و HTML توصیف کرد.
CORE رابط های سطح پایینی را ارائه می دهد که می توانند برای نمایش هر سند ساختاری استفاده شوند.
HTML رابط های سطح بالایی را ارائه می دهد که می توانند برای نشان دادن اسناد HTML استفاده شوند.

سطح ۲: شامل شش مشخصات CORE2، VIEWS، EVENTS، STYLE، TRAVERSAL و RANGE است.

CORE2: عملکرد CORE مشخص شده توسط DOM سطح ۱ را گسترش می دهد.
VIEWS: views به برنامه ها اجازه می دهد تا به صورت پویا به محتوای سند دسترسی پیدا کرده و آن را دستکاری کنند.

رویدادها: رویدادها اسکریپت هایی هستند که یا در هنگام واکنش کاربر به صفحه وب توسط مرورگر اجرا می شوند.

STYLE: به برنامه ها اجازه می دهد تا به صورت پویا به محتوای برگه های سبک دسترسی داشته باشند و آن ها را دستکاری کنند.

TRAVERSAL: این به برنامه ها اجازه می دهد تا به صورت پویا از سند عبور کنند.

RANGE: این به برنامه ها اجازه می دهد تا به صورت پویا محدوده ای از محتوا را در سند شناسایی کنند.

سطح ۳: شامل پنج مشخصات مختلف است: CORE3، LOAD و SAVE، VALIDATION، EVENTS و XPATH.

CORE3: عملکرد CORE مشخص شده توسط DOM سطح ۲ را گسترش می دهد.

LOAD and SAVE: این به برنامه اجازه می دهد تا محتوای سند XML را به صورت پویا در سند DOM بارگذاری کند و با سریال سازی، سند DOM را در یک سند XML ذخیره کند.

اعتبار سنجی: این به برنامه اجازه می دهد تا به صورت پویا محتوا و ساختار سند را به روز کند و در عین حال از معتبر ماندن سند اطمینان حاصل کند.

EVENTS: قابلیت رویدادهای مشخص شده توسط DOM Level 2 را گسترش می دهد.

XPATH: XPATH یک زبان مسیر است که می تواند برای دسترسی به درخت DOM استفاده شود.