 and broeser object model (BOM).jpg "DOM در مرورگر و جاوا اسکریپت")
DOM چیست؟
تعریف DOM و مخفف آن DOM، که مخفف عبارت Document Object Model است، یک ساختار درختی از تمام عناصر یک صفحه وب است که مرورگر ایجاد می‌کند. این ساختار به جاوا اسکریپت اجازه می‌دهد تا به عناصر صفحه دسترسی داشته باشد و آنها را تغییر دهد. با DOM می‌توانید عناصر صفحه وب را اضافه، حذف یا ویرایش کنید و صفحات وب پویا و جذاب بسازید. این مدل به عنوان نمایی از محتوای صفحه وب عمل می‌کند و هر عنصر را به صورتی که بتوانید با آن تعامل کنید، نمایش می‌دهد.
معرفی Document Object Model و اهمیت آن
Document Object Model به عنوان پل ارتباطی بین HTML، CSS و جاوا اسکریپت عمل می‌کند. اهمیت DOM در این است که به برنامه‌نویسان امکان می‌دهد تا صفحات وب را به صورت دینامیک و تعاملی بسازند. بدون DOM، جاوا اسکریپت نمی‌تواند به عناصر HTML دسترسی پیدا کند و آنها را دستکاری نماید. DOM همچنین به شما اجازه می‌دهد که به تمام عناصر و ویژگی‌های صفحه دسترسی داشته باشید و آنها را بر اساس نیاز خود تغییر دهید. این قابلیت به شما اجازه می‌دهد که به راحتی وب‌سایت‌های مدرن و تعاملی طراحی کنید که بتوانند پاسخگوی نیازهای کاربران باشند.
درخت DOM چیست؟
بررسی ساختار درختی DOM
DOM به شکل یک درخت از نودها (گره‌ها) سازماندهی شده است که هر کدام از این گره‌ها می‌تواند یک عنصر، متن یا خصوصیت باشد. این ساختار درختی به برنامه‌نویسان اجازه می‌دهد تا به صورت سلسله مراتبی به عناصر دسترسی داشته باشند و آنها را ویرایش کنند. این ساختار باعث می‌شود که بتوانید به سادگی به هر بخشی از صفحه وب دسترسی پیدا کرده و تغییرات مورد نظر را اعمال کنید. همچنین این درخت به شما امکان می‌دهد تا تمام بخش‌های صفحه را به صورت لایه‌به‌لایه مرور کنید و تغییرات دقیق‌تری اعمال نمایید.
نحوه سازماندهی و نمایش عناصر صفحه وب در درخت DOM
هر صفحه وب به عنوان یک درخت از عناصر HTML نمایش داده می‌شود که ریشه این درخت، عنصر <html> است. تمام عناصر صفحه به عنوان فرزندان این ریشه سازماندهی شده‌اند و این ساختار کمک می‌کند تا جاوا اسکریپت بتواند به صورت دقیق با هر بخش از صفحه تعامل داشته باشد. به عنوان مثال، عنصر <body> به عنوان فرزند عنصر <html> است و تمام عناصر داخل <body> نیز به عنوان فرزندان آن در نظر گرفته می‌شوند. این ساختار سلسله‌مراتبی باعث می‌شود که عناصر صفحه به شکل قابل مدیریت‌تری سازماندهی شوند و شما بتوانید به راحتی به هر عنصر دسترسی پیدا کنید.
کاربرد DOM در جاوا اسکریپت
چگونه DOM به جاوا اسکریپت اجازه می‌دهد عناصر صفحه را دستکاری کند
جاوا اسکریپت می‌تواند با استفاده از متدهای DOM به عناصر HTML دسترسی پیدا کند و آنها را تغییر دهد. برای مثال، می‌توانیم از متد getElementById برای یافتن یک عنصر خاص و سپس ویرایش محتویات یا خصوصیات آن استفاده کنیم. DOM با فراهم کردن این متدها به جاوا اسکریپت این امکان را می‌دهد که تغییرات مختلفی را روی صفحه وب اعمال کند. این تغییرات می‌توانند شامل اضافه کردن یا حذف کردن عناصر، تغییر محتوا یا حتی تغییر استایل و ظاهر عناصر باشند. علاوه بر این، رویدادهای جاوا اسکریپت مانند click و mouseover می‌توانند به DOM متصل شوند تا تعاملات پویا با کاربران ایجاد شود. به همین دلیل است که DOM یکی از مهم‌ترین ابزارهای موجود برای توسعه وب پویا است.
مثال‌های عملی از دسترسی به عناصر با getElementById و دستکاری خصوصیات
فرض کنید می‌خواهید متن یک عنصر با شناسه title را تغییر دهید. می‌توانید این کار را به راحتی با کد زیر انجام دهید:
let element = document.getElementById('title');
element.innerHTML = 'متن جدید';این کد باعث می‌شود که متن عنصر با شناسه title به 'متن جدید' تغییر کند. همچنین می‌توانید با استفاده از متدهای دیگر، ویژگی‌های مختلفی را تغییر دهید، مثل رنگ متن یا اندازه فونت. برای مثال:
element.style.color = 'red';
element.style.fontSize = '20px';این دستورات رنگ متن را به قرمز و اندازه فونت را به ۲۰ پیکسل تغییر می‌دهند.
تفاوت بین DOM و BOM
DOM و BOM چیست؟
BOM یا Browser Object Model به مدل اشیای مرورگر اشاره دارد که به شما اجازه می‌دهد با قسمت‌های مختلف مرورگر مثل پنجره، تاریخچه و موقعیت جغرافیایی تعامل داشته باشید. برخلاف DOM که با عناصر HTML سروکار دارد، BOM مستقیماً به مرورگر و ویژگی‌های آن مرتبط است. BOM شامل عناصری مثل window، navigator، و location است که به شما امکان می‌دهند تا با مرورگر کار کنید، مثل باز کردن یا بستن پنجره‌ها یا دسترسی به اطلاعات کاربر.
تفاوت‌ها و کاربردهای هر یک در مرورگر
تفاوت اصلی بین DOM و BOM این است که DOM برای تعامل با محتوای صفحه استفاده می‌شود، در حالی که BOM برای تعامل با ویژگی‌های مرورگر به کار می‌رود. برای مثال، از BOM می‌توانید برای تغییر اندازه پنجره مرورگر یا دسترسی به URL فعلی استفاده کنید. از سوی دیگر، از DOM برای تغییر محتوا و ساختار صفحه وب استفاده می‌شود. این تفاوت‌ها باعث می‌شوند که هر کدام از این مدل‌ها کاربردهای خاص خود را در توسعه وب داشته باشند و به شکل مکملی برای توسعه‌دهندگان عمل کنند.
رویدادها و تعاملات با DOM
DOMContentLoaded چیست و چرا مهم است؟ رویداد DOMContentLoaded زمانی اتفاق می‌افتد که تمام عناصر HTML صفحه به صورت کامل بارگذاری شده باشند، بدون نیاز به بارگذاری تمام تصاویر و منابع دیگر. این رویداد برای اجرای کد جاوا اسکریپت در زمان مناسب بسیار اهمیت دارد، چرا که تضمین می‌کند که تمام عناصر صفحه برای دسترسی آماده هستند. این رویداد به شما کمک می‌کند تا مطمئن شوید که دسترسی به عناصر صفحه قبل از اینکه بارگذاری شوند، انجام نمی‌شود که باعث خطاهای احتمالی در کد می‌شود.
بررسی رویدادهای مختلف و نحوه اجرای کد در زمان مناسب
رویدادهای مختلفی در مرورگر وجود دارند که می‌توانید از آنها برای تعامل با DOM استفاده کنید، مثل click، mouseover، و load. هر کدام از این رویدادها به شما امکان می‌دهد تا به نوع خاصی از تعاملات پاسخ دهید و تجربه کاربری بهتری فراهم کنید.
به عنوان مثال، می‌توانید از رویداد click برای دستکاری DOM استفاده کنید:
document.getElementById('myButton').addEventListener('click', () => {
let newElement = document.createElement('p');
newElement.innerHTML = 'این یک پاراگراف جدید است';
document.body.appendChild(newElement);
});این کد باعث می‌شود که با کلیک بر روی دکمه‌ای با شناسه myButton، یک پاراگراف جدید به صفحه اضافه شود. برای مثال، رویداد click زمانی اتفاق می‌افتد که کاربر روی یک عنصر کلیک می‌کند و شما می‌توانید کدی را اجرا کنید که واکنش مناسب را به این رویداد نشان دهد. رویداد load زمانی رخ می‌دهد که همه محتوای صفحه، شامل تصاویر و دیگر منابع، به صورت کامل بارگذاری شده باشند.
آموزش دستکاری DOM (DOM Manipulation)
معرفی متدهای پرکاربرد برای دستکاری DOM
برای دستکاری DOM، می‌توانید از متدهایی مثل appendChild برای اضافه کردن یک عنصر جدید، و removeChild برای حذف یک عنصر استفاده کنید. این متدها به شما کمک می‌کنند تا عناصر صفحه را به صورت دینامیک تغییر دهید. برای مثال، می‌توانید یک عنصر جدید به صفحه اضافه کنید یا یک عنصر خاص را از آن حذف کنید. متدهای دیگری مثل replaceChild نیز به شما امکان می‌دهند که یک عنصر را با عنصر دیگری جایگزین کنید. این قابلیت‌ها برای توسعه وب تعاملی بسیار کاربردی هستند.
نحوه تغییر خصوصیات و استایل‌ها با getComputedStyle
برای دسترسی به استایل‌های محاسبه‌شده یک عنصر می‌توانید از متد getComputedStyle استفاده کنید. این متد به شما اجازه می‌دهد تا مقادیر نهایی خصوصیات CSS که توسط مرورگر محاسبه شده است را دریافت کنید. به عنوان مثال، اگر بخواهید بدانید یک عنصر دقیقاً چه رنگی دارد، می‌توانید از getComputedStyle استفاده کنید:
let element = document.getElementById('myElement');
let style = window.getComputedStyle(element);
console.log(style.color);این کد رنگ محاسبه‌شده عنصر myElement را در کنسول چاپ می‌کند.
تصویر پیشنهادی: یک مثال تصویری از تغییر استایل یک عنصر با استفاده از جاوا اسکریپت.
مثال‌های عملی و کاربردی DOM
ایجاد یک نمونه کوچک برای دستکاری DOM به عنوان مثال، فرض کنید می‌خواهید یک دکمه به صفحه اضافه کنید که با کلیک روی آن، یک عنصر جدید به لیست اضافه شود:
let button = document.createElement('button');
button.innerHTML = 'اضافه کردن آیتم';
document.body.appendChild(button);
button.addEventListener('click', () => {
let newItem = document.createElement('li');
newItem.innerHTML = 'آیتم جدید';
document.getElementById('myList').appendChild(newItem);
});این کد یک دکمه ایجاد می‌کند که با کلیک روی آن، یک آیتم جدید به لیست اضافه می‌شود. همچنین می‌توانید از روش‌های دیگری برای اضافه کردن ویژگی‌های مختلف به عناصر استفاده کنید. برای مثال، می‌توانید به دکمه استایل بدهید یا آن را به شکل خاصی نمایش دهید.
تمرین‌هایی برای کاربران جهت تقویت مهارت در دستکاری DOM
با استفاده از getElementById و innerHTML متن یک عنصر را تغییر دهید.
یک لیست ایجاد کنید و با کلیک روی دکمه‌ای، آیتم‌های جدید به آن اضافه کنید.
از removeChild برای حذف یک عنصر از صفحه استفاده کنید.
با استفاده از setAttribute یک خصوصیت جدید به یک عنصر اضافه کنید و تاثیر آن را مشاهده کنید.
با استفاده از رویداد mouseover رنگ یک عنصر را هنگام حرکت ماوس تغییر دهید.
نتیجه‌گیری
DOM یکی از مهم‌ترین بخش‌های تعامل مرورگر با صفحات وب است و یادگیری نحوه استفاده از آن می‌تواند به شما کمک کند تا صفحات وب پویاتر و تعاملی‌تری ایجاد کنید. با تسلط بر دستکاری DOM، می‌توانید تجربه کاربری بهتری فراهم کنید و به عنوان یک توسعه‌دهنده وب حرفه‌ای تر عمل کنید. DOM به شما این امکان را می‌دهد که به طور کامل کنترل محتوای صفحه وب را به دست بگیرید و تغییرات لازم را به صورت دینامیک و در زمان واقعی اعمال کنید.
برای ادامه یادگیری، پیشنهاد می‌کنیم از فریمورک Blazor استفاده کنید که به شما امکان می‌دهد برنامه‌های تعاملی و مدرن بسازید و DOM را به شکلی ساده‌تر مدیریت کنید. Blazor به ویژه برای برنامه‌نویسان سی‌شارپ که به دنبال ایجاد وب‌سایت‌های پویا هستند، بسیار مناسب است. برای آشنایی بیشتر با Blazor می‌توانید به مقاله معرفی Blazor مراجعه کنید. همچنین، اگر علاقه‌مند به یادگیری عمیق‌تر و حرفه‌ای هستید، دوره سه‌ماهه مسترکلاس Blazor که به صورت جامع تمامی مباحث مورد نیاز را پوشش می‌دهد، در دسترس شماست.
کد کامل مثال ها:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تمرینات عملی DOM و جاوا اسکریپت</title>
</head>
<body>
<h1>تمرینات عملی DOM و جاوا اسکریپت</h1>
<h2>مثال‌های عملی از دسترسی به عناصر و دستکاری خصوصیات</h2>
<div id="title">این متن قرار است تغییر کند</div>
<button onclick="changeText()">تغییر متن</button>
<script>
function changeText() {
let element = document.getElementById('title');
element.innerHTML = 'متن جدید';
element.style.color = 'red';
element.style.fontSize = '20px';
}
</script>
<h2>ایجاد و افزودن عناصر جدید به صفحه</h2>
<button id="addButton">اضافه کردن پاراگراف جدید</button>
<script>
document.getElementById('addButton').addEventListener('click', () => {
let newElement = document.createElement('p');
newElement.innerHTML = 'این یک پاراگراف جدید است';
document.body.appendChild(newElement);
});
</script>
<h2>افزودن آیتم‌های جدید به لیست</h2>
<ul id="myList">
<li>آیتم اولیه</li>
</ul>
<button id="addItemButton">اضافه کردن آیتم جدید به لیست</button>
<script>
document.getElementById('addItemButton').addEventListener('click', () => {
let newItem = document.createElement('li');
newItem.innerHTML = 'آیتم جدید';
document.getElementById('myList').appendChild(newItem);
});
</script>
</body>
</html>
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید