جاوااسکریپت فقط زبانی برای نوشتن منطق برنامه نیست؛ بلکه پلی است بین کاربر، صفحه وب و خود مرورگر. زمانی که یک صفحه وب باز میشود، جاوااسکریپت میتواند هم با ساختار HTML کار کند و هم با امکانات خود مرورگر تعامل داشته باشد. همینجاست که دو مفهوم بسیار مهم یعنی DOM و BOM وارد میشوند. اگر بخواهیم ساده بگوییم، DOM به محتوای صفحه مربوط است و BOM به قابلیتهای خود مرورگر. فهم درست این دو موضوع، یکی از پایههای مهم در یادگیری جاوااسکریپت سمت کاربر است.
DOM چیست و چه کاری انجام میدهد؟
DOM مخفف Document Object Model است؛ یعنی «مدل شیءگرای سند». این مدل، صفحه HTML را به شکل یک ساختار درختی در اختیار جاوااسکریپت قرار میدهد تا برنامه بتواند عناصر صفحه را بخواند، تغییر دهد، حذف کند یا برای آنها رفتار جدید تعریف کند.
در واقع وقتی مرورگر یک فایل HTML را بارگذاری میکند، آن را به مجموعهای از گرهها یا نودها تبدیل میکند. هر تگ HTML مثل یک عنصر در این درخت دیده میشود. به همین دلیل جاوااسکریپت میتواند به بخشهای مختلف صفحه دسترسی پیدا کند؛ مثلاً متن یک پاراگراف را تغییر دهد، کلاس یک دکمه را عوض کند یا در پاسخ به کلیک کاربر، محتوای صفحه را بهروزرسانی کند.
DOM اساس تعامل در صفحات وب است. بدون DOM، جاوااسکریپت فقط یک زبان محاسباتی بود؛ اما با DOM، تبدیل به ابزاری برای زندهکردن صفحه وب میشود.
BOM چیست و چرا مهم است؟
BOM مخفف Browser Object Model است؛ یعنی «مدل شیءگرای مرورگر». برخلاف DOM که روی خود سند HTML تمرکز دارد، BOM مربوط به امکانات و اجزای محیط مرورگر است. این مدل به جاوااسکریپت اجازه میدهد با چیزهایی مثل پنجره مرورگر، آدرس صفحه، تاریخچه بازدید، اطلاعات مرورگر کاربر و حتی بعضی قابلیتهای کنترلی ارتباط برقرار کند.
BOM بخشی از استاندارد اصلی زبان جاوااسکریپت نیست، اما در همه مرورگرهای مدرن به شکل گسترده پشتیبانی میشود. به همین دلیل در پروژههای تحت وب، بسیار پرکاربرد است. هر جا که لازم باشد اطلاعات URL خوانده شود، صفحه به آدرس جدید هدایت شود، یا تاریخچه مرور مرورگر بررسی شود، در واقع داریم از BOM استفاده میکنیم.
تفاوت اصلی BOM و DOM چیست؟
تفاوت این دو مفهوم در محدوده کاری آنهاست. DOM با محتوای داخل صفحه سروکار دارد، در حالی که BOM با خود مرورگر و امکانات آن در ارتباط است.
اگر بخواهیم با یک مثال ساده این تفاوت را روشن کنیم:
DOM به شما کمک میکند بگویید «این متن داخل صفحه را عوض کن»
BOM به شما کمک میکند بگویید «آدرس صفحه را تغییر بده» یا «اطلاعات مرورگر را بررسی کن»
به زبان دیگر، DOM درون صفحه را مدیریت میکند و BOM بیرون از صفحه را. همین تفاوت، مرز بسیار مهمی در برنامهنویسی وب ایجاد میکند.
Window؛ نقطه شروع BOM در جاوااسکریپت
در بیشتر مرورگرها، شیء window مرکز اصلی BOM محسوب میشود. این شیء نماینده پنجره یا تب فعلی مرورگر است و بسیاری از قابلیتهای مرورگر از طریق آن در دسترس قرار میگیرند. وقتی در جاوااسکریپت نام window را میشنویم، در واقع با بالاترین سطح از محیط مرورگر روبهرو هستیم.
بسیاری از ویژگیهای مهم مرورگر زیر مجموعه window هستند. برای مثال، document برای دسترسی به DOM، location برای بررسی یا تغییر آدرس صفحه، history برای کار با تاریخچه مرور، navigator برای اطلاعات مربوط به مرورگر و سیستم کاربر، همگی از طریق window قابل دسترسیاند. به همین دلیل، درک درست window کمک میکند تا ساختار کلی BOM را بهتر بفهمیم.
Document؛ دروازه ورود به DOM
اگر window نماینده محیط مرورگر باشد، document نماینده خود صفحه وب است. با استفاده از document میتوان به اجزای HTML دسترسی پیدا کرد و آنها را تغییر داد. این شیء قلب اصلی DOM به شمار میرود.
تقریباً تمام عملیات مهم روی صفحه، از طریق document انجام میشوند. گرفتن یک عنصر، تغییر متن آن، ساختن عنصر جدید، حذف یک عنصر یا مدیریت رویدادها، همگی در همین مسیر قرار میگیرند. به همین خاطر است که اغلب آموزشهای عملی جاوااسکریپت، بخش زیادی از تمرکز خود را روی document میگذارند.
اجزای پرکاربرد BOM در جاوااسکریپت
چند بخش از BOM در پروژههای واقعی بسیار زیاد استفاده میشوند و شناخت آنها ضروری است.
location برای کار با آدرس صفحه استفاده میشود. با آن میتوان URL فعلی را خواند یا کاربر را به صفحه دیگری هدایت کرد.
history برای مدیریت تاریخچه مرورگر کاربرد دارد. این بخش به برنامه اجازه میدهد در میان صفحات بازدیدشده حرکت کند یا رفتار دکمههای بازگشت و جلو را کنترل کند.
navigator اطلاعاتی درباره مرورگر کاربر، سیستمعامل و برخی قابلیتهای دستگاه در اختیار میگذارد. این اطلاعات برای تشخیص سازگاری یا شخصیسازی تجربه کاربری مفید است.
screen نیز اطلاعاتی درباره نمایشگر کاربر ارائه میدهد؛ مثل اندازه صفحه یا رزولوشن. این دادهها در طراحی واکنشگرا و تنظیم رابط کاربری اهمیت زیادی دارند.
چرا DOM و BOM برای برنامهنویس وب ضروری هستند؟
بدون DOM، شما نمیتوانید محتوای صفحه را به شکل پویا تغییر دهید. بدون BOM هم نمیتوانید با امکانات محیط مرورگر تعامل مؤثر داشته باشید. این دو مفهوم در کنار هم باعث میشوند جاوااسکریپت به یک زبان قدرتمند برای ساخت صفحات تعاملی تبدیل شود.
در عمل، تقریباً هر وبسایت مدرن از هر دو استفاده میکند. اگر دکمهای روی صفحه با کلیک کاربر باز و بسته میشود، احتمالاً DOM درگیر است. اگر بعد از پر کردن یک فرم، صفحه به بخش دیگری منتقل میشود یا هشدار مرورگر نمایش داده میشود، BOM وارد عمل شده است.
مسیر یادگیری بهتر برای DOM و BOM
برای یادگیری این دو موضوع، بهتر است ابتدا ساختار HTML و نحوه انتخاب عناصر را خوب یاد بگیرید، چون DOM بر پایه همین مفاهیم ساخته شده است. بعد از آن، به سراغ window، location، history و navigator بروید تا درک درستی از BOM پیدا کنید. وقتی این دو بخش را کنار هم بفهمید، بسیاری از قابلیتهای جاوااسکریپت برایتان روشنتر خواهد شد و میتوانید تعاملات حرفهایتری در صفحات وب بسازید.
کلیدواژه ها : آشنایی با DOM در جاوااسکریپت-آشنایی با BOM در جاوااسکریپت-تفاوت DOM و BOM-Document Object Model-Browser Object Model-JavaScript DOM-JavaScript BOM-شیء document-شیء window-شیء location-شیء history-شیء navigator-جاوااسکریپت در مرورگر-مدیریت صفحه در جاوااسکریپت-برنامه نویسی سمت کاربر-تعامل با HTML در جاوااسکریپت-آموزش DOM و BOM-
