مقدمة
عندما يتعلق الأمر بتطوير الويب، يُعد فهم نموذج كائن المتصفح (BOM) ونموذج كائن المستند (DOM) أمرًا بالغ الأهمية للتعامل مع صفحات الويب والتفاعل معها بفعالية. يُعد كلٌّ من نموذج كائن المتصفح (BOM) ونموذج كائن المستند (DOM) مكونين أساسيين في بيئة جافا سكريبت في متصفح الويب. في هذه المقالة، سنتناول تفاصيل كلٍّ من نموذجي كائن المتصفح (BOM) وDOM، مع تسليط الضوء على اختلافاتهما ووظائفهما وتطبيقاتهما العملية. في النهاية، ستكتسب فهمًا شاملًا لهذين النموذجين ودورهما في تطوير الويب.
نموذج كائن المتصفح (BOM)
تُمثل قائمة المواد (BOM) كائنات وواجهات خاصة بالمتصفح تُمكّن جافا سكريبت من التفاعل مع نافذة المتصفح وعناصرها. تُتيح الوصول إلى خصائص وأساليب وأحداث مُتنوعة، مما يُمكّن المُطورين من التحكم في سلوك المتصفح، وإدارة النوافذ، وإدارة ملفات تعريف الارتباط، ومعالجة عناوين URL، وغير ذلك الكثير.
المكونات الرئيسية لقائمة المواد:
كائن النافذة:
- يمثل الكائن العالمي في قائمة المواد (BOM) نافذة المتصفح ويوفر الوصول إلى الميزات المتعلقة بالمتصفح.
كائن المستكشف:
- يقدم معلومات حول اسم المتصفح وإصداره ومنصته وقدراته.
موقع الكائن:
- يمثل عنوان URL لصفحة الويب الحالية ويسمح بالتلاعب بعنوان URL.
كائن المستند:
يعرض مستند HTML بأكمله ويوفر طرقًا للتفاعل مع محتواه.
سيناريوهات عملية لاستخدام قائمة المواد:
إدارة الويندوز:
// 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 الرئيسية:
كائن المستند:
- إنه يمثل جذر شجرة المستند ويوفر طرقًا للوصول إلى العناصر ومعالجتها.
كائنات العناصر:
- يمثل عناصر HTML ويوفر طرقًا للتعامل مع سماتها وأنماطها ومحتواها.
كائنات العقدة:
- يمثل أنواعًا مختلفة من العقد في المستند، بما في ذلك العناصر والنصوص والتعليقات والمزيد.
سيناريوهات عملية لاستخدام 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 جزءًا من بيئة JavaScript في متصفح الويب.
- توفر قائمة المواد إمكانية الوصول إلى ميزات محددة للمتصفح وتتحكم في نافذة المتصفح.
- يمثل DOM بنية مستند HTML أو XML ويسمح بالتلاعب بعناصره.
الاختلافات الرئيسية بين BOM و DOM:
نِطَاق:
- تعمل قائمة المواد (BOM) على مستوى النافذة، بينما تعمل قائمة المواد (DOM) داخل المستند وعناصره.
الوظيفة:
- يركز 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)، يمكن للمطورين إنشاء تطبيقات ويب ديناميكية وتفاعلية. سواءً كان الأمر يتعلق بإدارة النوافذ، أو معالجة عناوين URL، أو إدارة ملفات تعريف الارتباط، أو تعديل المحتوى، أو التفاعل مع الأحداث، فإن نموذج كائن المتصفح (BOM) ونموذج كائن المستند (DOM) يوفران الأدوات اللازمة لتحسين تفاعلات الويب مع JavaScript.
