هنگام ساخت برنامه‌های وب مدرن، توسعه‌دهندگان اغلب با مدل‌های مختلف مرورگر که نحوه ساختاردهی، سبک‌دهی و مدیریت صفحات وب را تعریف می‌کنند، تعامل دارند. سه مدل کلیدی که نقش مهمی در توسعه وب ایفا می‌کنند عبارتند از مدل شیء سند ( DOM )، مدل شیء CSS ( CSSOM ) و مدل شیء مرورگر ( BOM ). درک این مدل‌ها برای بهینه‌سازی رندر صفحات وب، بهبود عملکرد و مدیریت موثر تعاملات کاربران ضروری است. در ادامه به CSSOM ، BOM و DOM در جاوااسکریپت چیست؟ می پردازیم.
در این وبلاگ، هر یک از این مدل‌ها را به تفصیل بررسی خواهیم کرد، نقش‌های آنها را توضیح خواهیم داد، نحوه کار آنها را بررسی می‌کنیم و اهمیت آنها را توضیح می‌دهیم.
مدل شیء سند DOM در جاوااسکریپت چیست؟
مدل شیء سند (DOM) نمایشی ساختاری از یک سند HTML است. هنگامی که یک مرورگر یک صفحه وب را بارگذاری می‌کند، HTML را تجزیه کرده و آن را به یک ساختار درختی به نام DOM تبدیل می‌کند. هر عنصر، ویژگی و گره متنی در یک سند HTML به عنوان یک گره در درخت DOM نمایش داده می‌شود.
ساختار DOM
DOM یک سند HTML را به عنوان یک درخت سلسله مراتبی از گره‌ها نشان می‌دهد. به عنوان مثال، کد HTML زیر را در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<title>صفحه من</title>
</head>
<body>
<h1>سلام دنیا!</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
نمایش DOM این ساختار HTML به این صورت است:
سند ├── html │ ├── head │ │ ├── title │ ├── body │ ├── h1 │ ├── p
هر عنصر یک گره است و آنها در یک رابطه والد-فرزند قرار دارند.
دستکاری DOMدر جاوااسکریپت
جاوا اسکریپت روش‌هایی برای دستکاری DOM به صورت پویا ارائه می‌دهد. برخی از تکنیک‌های رایج برای دستکاری DOM عبارتند از:
انتخاب عناصر:
let heading = document.querySelector('h1');
تغییر عناصر:
heading.textContent = 'خوش آمدید!';
افزودن عناصر:
let newParagraph = document.createElement('p');
newParagraph.textContent = 'یک پاراگراف جدید اضافه شد!';
document.body.appendChild(newParagraph);
اهمیت DOM
- امکان تعامل پویا با صفحات وب را فراهم می‌کند.
- رویدادهایی مانند کلیک و فشردن کلید را مدیریت می‌کند.
- به توسعه‌دهندگان اجازه می‌دهد بدون نیاز به بارگذاری مجدد صفحه، ساختار آن را تغییر دهند.
2. مدل شیء CSS CSSOM در جاوااسکریپت
مدل شیء CSS ( CSSOM ) در جاوااسکریپت یک نمایش درخت‌مانند از تمامی سبک‌های اعمال‌شده به یک صفحه وب است. همان‌طور که DOM نمایانگر ساختار HTML است، CSSOM نمایانگر سبک‌های اعمال‌شده از طریق CSS است.
ساختار CSSOM
کد CSS زیر را در نظر بگیرید که به یک سند HTML اعمال شده است:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
نمایش CSSOM به این صورت خواهد بود: ├── body │ ├── font-family: Arial, sans-serif │ ├── background-color: #f0f0f0 ├── h1 │ ├── color: blue
هر عنصر یک گره است و آنها در یک رابطه والد-فرزند قرار دارند.
نحوه کار CSSOM در جاوااسکریپت
هنگامی که مرورگر یک صفحه وب را بارگذاری می‌کند، مراحل زیر را دنبال می‌کند
- تجزیه HTML و ساخت DOM.
- تجزیه CSS و ساخت CSSOM.
- ترکیب DOM و CSSOM برای تشکیل درخت رندر.
- مرورگر عناصر را روی صفحه نمایش ترسیم می‌کند.
دستکاری CSSOM با جاوا اسکریپت
جاوا اسکریپت این امکان را فراهم می‌کند که سبک‌ها را به صورت پویا تغییر دهیم:
let heading = document.querySelector('h1');
heading.style.color = 'red';
یا افزودن قوانین جدید CSS:
document.styleSheets[0].insertRule('h1 { font-size: 24px; }', 0);
اهمیت CSSOM
- تعیین می‌کند که سبک‌ها چگونه به عناصر اعمال شوند.
- اجازه تغییر پویا سبک‌ها را می‌دهد.
- به مرورگر کمک می‌کند صفحات وب را بهینه‌تر نمایش دهد.
3. مدل شیء مرورگر BOM در جاوااسکریپت
مدل شیء مرورگر (BOM) نمایانگر تمام ویژگی‌هایی است که توسط مرورگر ارائه می‌شوند و مستقیماً به محتوای صفحه مربوط نیستند، مانند اشیاء window، history و navigator.
بر خلاف DOM و CSSOM، BOM توسط W3C استاندارد نشده است، اما در تمامی مرورگرهای مدرن پشتیبانی می‌شود.
اشیاء کلیدی در BOM در جاوااسکریپت
1. شیء window
شیء window در جاوا اسکریپت شیء جهانی است و نمایانگر پنجره مرورگر است.
console.log(window.innerWidth); // نمایش عرض ویوپورت
2. شیء navigator
اطلاعاتی درباره مرورگر و دستگاه ارائه می‌دهد.
console.log(navigator.userAgent); // نمایش جزئیات مرورگر
3. شیء history
امکان مدیریت تاریخچه جلسه مرورگر را فراهم می‌کند.
history.back(); // بازگشت به صفحه قبل
history.forward(); // رفتن به صفحه بعدی
4. شیء location
مدیریت URL صفحه فعلی را انجام می‌دهد.
console.log(location.href); // نمایش URL فعلی
location.reload(); // بارگذاری مجدد صفحه
اهمیت BOM در جاوااسکریپت
- امکان کنترل پیمایش در مرورگر را فراهم می‌کند.
- دسترسی به جزئیات مرورگر برای بهبود تجربه کاربری ارائه می‌دهد.
- امکان مدیریت موقعیت مکانی، اندازه صفحه نمایش و نوع دستگاه را فراهم می‌کند.
درک مدل‌های DOM، CSSOM و BOM برای توسعه وب ضروری است. این مدل‌ها با هم کار می‌کنند تا صفحات وب مدرن را ایجاد و مدیریت کنند
- DOM در جاوااسکریپت نمایانگر ساختار HTML است و امکان دستکاری پویا را فراهم می‌کند.
- CSSOM در جاوااسکریپت نمایانگر سبک‌ها است و کنترل نحوه نمایش عناصر را بر عهده دارد.
- BOM در جاوااسکریپت امکان دسترسی به قابلیت‌های مرورگر فراتر از محتوای صفحه را فراهم می‌کند.
با تسلط بر این مفاهیم، توسعه‌دهندگان می‌توانند عملکرد صفحات وب را بهینه کنند و تجربه‌های تعاملی‌تری ایجاد کنند. چه یک مبتدی باشید و چه یک توسعه‌دهنده حرفه‌ای، درک عمیق این مدل‌ها به شما کمک می‌کند کدهای بهینه‌تر و موثرتری بنویسید. حال که دریافتید CSSOM ، BOM و DOM در جاوااسکریپت چیست ، می توایند از دیگر مقالات سایت ایوولرن دیدن کنید.