آشنایی با BOM و DOM در جاوا اسکریپت

مقدمه

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

مدل شیء مرورگر (BOM)

BOM نشان دهنده اشیاء و رابط های خاص مرورگر است که جاوا اسکریپت را قادر می سازد با پنجره مرورگر و عناصر آن تعامل داشته باشد. دسترسی به ویژگی‌ها، روش‌ها و رویدادهای مختلف را فراهم می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا رفتار مرورگر را کنترل کنند، پنجره‌ها را مدیریت کنند، کوکی‌ها را مدیریت کنند، URL‌ها را دستکاری کنند و موارد دیگر.

اجزای اصلی BOM:

Window Object:

• شی سراسری در BOM، نمایانگر پنجره مرورگر و امکان دسترسی به ویژگی‌های مرتبط با مرورگر است.

Navigator Object:

• اطلاعاتی در مورد نام، نسخه، پلتفرم و قابلیت های مرورگر ارائه می دهد.

Location Object:

• نشان دهنده URL صفحه وب فعلی است و اجازه دستکاری URL را می دهد.

Document Object:

کل سند HTML را نشان می دهد و روش هایی را برای تعامل با محتوای آن ارائه می دهد.

سناریوهای عملی برای استفاده از BOM:

مدیریت ویندوز:

// Open a new browser window
const newWindow = window.open("https://www.example.com", "_blank");
// Close the current window
window.close();

دستکاری URL ها:

// Redirect the user to a different URL
window.location.href = "https://www.example.com";
// Get the current URL and display it
const currentUrl = window.location.href;
console.log(currentUrl);

رسیدگی به کوکی ها:

// Create a cookie
document.cookie = "username=John Doe";
// Read a cookie
const username = document.cookie.split(";")[0].split("=")[1];
console.log(username);
// Delete a cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

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

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

اجزای کلیدی DOM:

Document Object:

• ریشه درخت سند را نشان می دهد و روش هایی را برای دسترسی و دستکاری عناصر ارائه می دهد.

Element Objects:

• نمایش عناصر HTML و ارائه روش هایی برای دستکاری ویژگی ها، سبک ها و محتوای آنها.

Node Objects:

• نشان دهنده انواع مختلف گره ها در سند، از جمله عناصر، متن، نظرات و موارد دیگر.

سناریوهای عملی برای استفاده از DOM:

اصلاح محتوا:

// Change the text of a paragraph element
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "Updated text";
// Update an element's attribute
const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");

عناصر دستکاری:

// Create a new element and append it to the document
const newElement = document.createElement("div");
newElement.textContent = "New Element";
document.body.appendChild(newElement);
// Remove an element from the document
const elementToRemove = document.getElementById("myElement");
elementToRemove.parentNode.removeChild(elementToRemove);

رسیدگی به رویدادها:

// Add an event listener to a button
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Button clicked");
});
// Handle form submission event
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault();
console.log("Form submitted");
});

مقایسه و تضاد BOM و DOM

رابطه بین BOM و DOM:

• هر دو BOM و DOM بخشی از محیط جاوا اسکریپت در یک مرورگر وب هستند.
• BOM دسترسی به ویژگی های خاص مرورگر را فراهم می کند و پنجره مرورگر را کنترل می کند.
• DOM ساختار یک سند HTML یا XML را نشان می دهد و امکان دستکاری عناصر آن را فراهم می کند.

تفاوت های کلیدی بین BOM و DOM:

Scope:

• BOM در سطح پنجره عمل می کند، در حالی که DOM در داخل سند و عناصر آن عمل می کند.

Functionality:

• BOM بر ویژگی‌های مرتبط با مرورگر مانند مدیریت پنجره‌ها، کوکی‌ها و URLها تمرکز دارد.
• DOM به دستکاری و تعامل با ساختار و محتوای سند مربوط می شود.

مثال های عملی مقایسه BOM و DOM:

دسترسی به ویژگی های پنجره با BOM:

// Get the width and height of the browser window
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
console.log(`Window dimensions: ${windowWidth} x ${windowHeight}`);
// Scroll to a specific position
window.scrollTo(0, 0);

دستکاری عناصر DOM با DOM:

// Change the background color of an element
const element = document.getElementById("myElement");
element.style.backgroundColor = "blue";
// Create a new element and append it to the document
const newElement = document.createElement("div");
newElement.textContent = "New Element";
document.body.appendChild(newElement);

نتیجه

درک مدل شیء مرورگر (BOM) و مدل شیء سند (DOM) برای دستکاری و تعامل مؤثر با صفحات وب بسیار مهم است. BOM دسترسی به ویژگی های خاص مرورگر را فراهم می کند و امکان کنترل پنجره مرورگر، کوکی ها و URL ها را فراهم می کند. از سوی دیگر، DOM دستکاری و تعامل با عناصر سند را تسهیل می کند و به روز رسانی محتوای پویا و مدیریت رویداد را امکان پذیر می کند. با استفاده از قابلیت های BOM و DOM، توسعه دهندگان می توانند برنامه های وب پویا و تعاملی ایجاد کنند. BOM و DOM خواه مدیریت ویندوز، دستکاری URL ها، مدیریت کوکی ها، اصلاح محتوا یا تعامل با رویدادها باشد، ابزارهای لازم را برای بهبود تعاملات وب با جاوا اسکریپت فراهم می کند.