مدل شیء سند (DOM)

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

پیدایش مدل شیء سند (DOM)

مفهوم DOM برای اولین بار در اواسط تا اواخر دهه 1990 در نتیجه نیاز به اجازه دادن به محتوای تعاملی وب بیشتر مطرح شد. با ظهور وب سایت های پویا و استفاده گسترده از جاوا اسکریپت، نیاز به مدلی وجود داشت که به اسکریپت ها اجازه می داد ساختار، سبک و محتوا را تغییر دهند. کنسرسیوم وب جهانی (W3C) وظیفه ایجاد یک API استاندارد شده برای این منظور را بر عهده گرفت که در نتیجه توسعه DOM انجام شد.

اولین سطح استاندارد DOM، DOM Level 1، توسط W3C در سال 1998 معرفی شد. این یک مدل جامع برای کل سند HTML یا XML، از جمله ابزارهایی برای تغییر هر بخشی از سند ارائه کرد.

گسترش مدل شیء سند (DOM)

DOM اساساً یک بستر و رابط زبانی خنثی است که به برنامه‌ها و اسکریپت‌ها اجازه می‌دهد تا به صورت پویا به محتوا، ساختار و سبک یک سند دسترسی پیدا کرده و به‌روزرسانی کنند.

DOM در سلسله مراتبی از گره ها سازماندهی شده است که هر کدام بخشی از سند مانند عناصر، ویژگی ها و متن را نشان می دهند. این ساختار درختی منطقی، پیمایش و دستکاری محتویات سند را آسان می کند.

یک سند وب به عنوان درختی از اشیاء مدل‌سازی می‌شود که همگی دارای ویژگی‌ها و روش‌ها هستند و می‌توانند شامل اشیاء دیگری باشند. به عنوان مثال، یک سند HTML به اشیایی تبدیل می شود که عناصری مانند "body"، "div"، "span" و "p" و همچنین ویژگی ها و محتوای متن آنها را نشان می دهد.

چگونه مدل شیء سند (DOM) کار می کند

ساختار داخلی DOM به صورت درختی از گره ها سازماندهی شده است. بالاترین گره است Document گره، که نمایانگر کل سند است. در زیر این، Element گره ها با عناصر HTML در صفحه مطابقت دارند، Attribute گره ها ویژگی های عناصر و را نگه می دارند Text گره ها محتوای متن عناصر را نگه می دارند.

این ساختار سلسله مراتبی به توسعه دهندگان اجازه می دهد تا در درخت سند حرکت کنند و از روش های API برای انتخاب، ایجاد، اصلاح یا حذف گره ها استفاده کنند.

در اینجا مثالی از نحوه ظاهر یک سند HTML به عنوان درخت DOM آورده شده است:

ریاضیاتکد را کپی کنید
Document
    ↳ Element: html
        ↳ Element: head
            ↳ Element: title
                ↳ Text: "Title of the Document"
        ↳ Element: body
            ↳ Element: h1
                ↳ Text: "Hello, world!"
            ↳ Element: p
                ↳ Text: "This is a paragraph."

ویژگی های کلیدی مدل شی سند (DOM)

1. ساختار درختی: DOM یک سند را در یک ساختار درختی منطقی نشان می دهد که پیمایش، انتخاب و دستکاری را ساده و شهودی می کند.

2. زبان-خنثی: DOM به هیچ زبان برنامه نویسی خاصی وابسته نیست. این یک قرارداد برای نمایش و تعامل با اشیاء در HTML، XML و انواع دیگر اسناد است.

3. دسترسی پویا و به روز رسانی: DOM به برنامه ها اجازه می دهد تا به صورت پویا به محتوا، ساختار و سبک یک سند دسترسی پیدا کرده و به روز کنند.

4. استاندارد شده: DOM یک استاندارد W3C است که از پذیرش و سازگاری گسترده آن در مرورگرها و پلتفرم های مختلف اطمینان می دهد.

انواع مدل شیء سند (DOM)

مشخصات DOM به چندین «سطح» و «ماژول» تقسیم می‌شود که هر کدام ویژگی‌ها و قابلیت‌هایی را به قبلی اضافه می‌کنند. انواع کلیدی عبارتند از:

استفاده از مدل شیء سند (DOM)

DOM هر بار که یک صفحه وب با استفاده از جاوا اسکریپت دستکاری می شود استفاده می شود. این API اساسی برای بسیاری از فناوری های وب است.

توسعه دهندگان از DOM برای تغییر پویا ظاهر، احساس و محتوای یک صفحه وب بدون نیاز به بارگذاری مجدد کامل صفحه استفاده می کنند و به رابط های کاربری تعاملی و پاسخگو اجازه می دهند.

علیرغم قدرت، DOM بدون مشکل نیست. در صورت عدم استفاده دقیق، به خصوص با اسناد وب بزرگ یا پیچیده، می تواند کند شود. دستکاری DOM ضعیف می تواند منجر به رندر صفحه کند و رابط های پاسخگو نباشد. برای رفع این مشکل، توسعه‌دهندگان اغلب از کتابخانه‌ها یا چارچوب‌هایی مانند jQuery، React یا Vue.js استفاده می‌کنند که APIهای سطح بالاتری را برای دستکاری کارآمد DOM ارائه می‌دهند.

ویژگی های DOM و مقایسه با اصطلاحات مشابه

چشم اندازهای آینده مرتبط با مدل شیء سند (DOM)

همانطور که فناوری های وب به تکامل خود ادامه می دهند، DOM API نیز به احتمال زیاد گسترش یافته و بهبود می یابد. پیشرفت‌های بالقوه آینده شامل روش‌های کارآمدتر برای دستکاری DOM، ادغام بهبود یافته با استانداردهای وب در حال ظهور، و تکامل مداوم مشخصات HTML است.

یک توسعه جالب در حال انجام، پذیرش تدریجی مؤلفه های وب است که امکان ایجاد تگ های HTML قابل استفاده مجدد و محصور شده را فراهم می کند. این ارتباط نزدیکی با Shadow DOM دارد که روشی برای کپسوله کردن عناصر DOM ارائه می‌کند.

مدل شی سند (DOM) و سرورهای پروکسی

پروکسی سرور واسطه ای است که درخواست ها و پاسخ ها را بین مشتری و سرور ارسال می کند. در حالی که DOM اساساً با ساختار و دستکاری اسناد وب در سمت مشتری سروکار دارد، سرورهای پروکسی در سطح شبکه کار می کنند.

با این حال، تقاطع این دو را می توان در سناریوهایی یافت که در آن یک سرور پروکسی ممکن است محتویات یک سند وب را تغییر دهد. به عنوان مثال، یک سرور پروکسی می تواند عناصر DOM را در یک صفحه وب قبل از رسیدن به مشتری اضافه، حذف یا تغییر دهد. این می تواند به دلایل مختلفی مانند تزریق اسکریپت ها، حذف عناصر ناخواسته، یا تغییر محتوا برای اهداف بومی سازی یا سفارشی سازی استفاده شود.

لینک های مربوطه

• MDN Web Docs: Document Object Model (DOM)
• استاندارد W3C DOM
• اطلاعات جاوا اسکریپت: DOM
• اصول وب گوگل: مرورگرها چگونه کار می کنند

این نمای کلی باید درک جامعی از مدل شیء سند (DOM)، منشأ آن، نحوه کارکرد، ویژگی‌های آن، و چگونگی تکامل آن ارائه دهد. DOM همچنان سنگ بنای توسعه وب تعاملی است و با پیشرفت فناوری های وب نقش مهمی را ایفا خواهد کرد.