دليل المبتدئين إلى BOM و DOM في JavaScript

JavaScript، اللغة التي تقوم بتشغيل الجوانب الديناميكية في تطوير الويب، توفر عنصرين أساسيين للتفاعل مع صفحات الويب: نموذج كائن المتصفح (BOM) ونموذج كائن المستند (DOM). في هذا الدليل، سنكتشف أساسيات BOM و DOM، وفهم كيفية عملهما وكيف يمكنك الاستفادة منهما لتعزيز مهارات تطوير الويب الخاصة بك.

 نموذج كائن المتصفح (BOM):

1. ما هو BOM؟
   
   نموذج كائن المتصفح (BOM) هو واجهة برمجية في JavaScript تتيح التفاعل مع المتصفح نفسه بدلاً من محتوى صفحة الويب. يوفر كائنات وأساليب للتحكم في سلوك المتصفح، وإدارة النوافذ، والتعامل مع التصفح.

2. مكونات BOM الشائعة:

   - كائن النافذة (Window Object):
     يُمثل كائن `window` نافذة المتصفح ويعتبر الكائن الجذر لـ BOM. يحتوي على خصائص مثل `location`، `navigator`، وأساليب مثل ` ()alert`.

   // مثال: الوصول إلى عنوان URL الحالي
let currentURL = window.location.href;

   - كائن المستكشف (Navigator Object):
     يقدم كائن `navigator` معلومات حول المتصفح، مثل اسمه وإصداره:
     

// مثال: الحصول على اسم المتصفح
     let browserName = window.navigator.appName;

   - كائن الشاشة (Screen Object):
     يحتوي كائن `screen` على معلومات حول شاشة المستخدم، مثل العرض والارتفاع.
 

   // مثال: الحصول على عرض الشاشة
     let screenWidth = window.screen.width;
 

 نموذج كائن المستند (DOM):

1. ما هو DOM؟
   
   نموذج كائن المستند (DOM) هو واجهة برمجية لوثائق الويب. يُمثل هيكل وثيقة كشجرة من الكائنات، مما يتيح للنصوص تحديث المحتوى والهيكل والأنماط للوثيقة بشكل دينامي.

2. مفاهيم DOM الشائعة:

   - كائن المستند (Document Object):
     يُمثل كائن `document` نقطة الدخول الرئيسية إلى DOM ويُمثل الوثيقة HTML بأكملها.
   

 // مثال: تغيير محتوى عنصر
 document.getElementById("example").innerHTML = "محتوى جديد";

   -كائنات العنصر (Element Objects):
     تُمثل عناصر الصفحة، مثل الفقرات أو الصور، باعتبارها كائنات العنصر. يمكنك التلاعب بخصائصها ومحتواها باستخدام JavaScript.

    
    مثال: تغيير النمط لعنصر
 

 let element = document.getElementById("example");
 element.style.color = "blue";

   - التعامل مع الأحداث (Event Handling):
     يسمح DOM بالاستجابة لتفاعلات المستخدم (الأحداث) مثل النقرات أو الضغط على الأزرار. يمكن إضافة مستمعي الأحداث للعناصر.

     `
     
   

// مثال: إضافة مستمع لحدث النقر
     document.getElementById("exampleButton").addEventListener("click", function() {
         alert("تم النقر على الزر!");
     });

 الاستنتاج:

فهم نموذج كائن المتصفح (BOM) ونموذج كائن المستند (DOM) أمر حاسم لتطوير الويب الفعّال. يوفر BOM التحكم في المتصفح، بينما يمكنك من خلال DOM تحديث محتوى صفحة الويب بشكل دينامي. من خلال اتقان هذه المفاهيم، يمكنك إنشاء تطبيقات الويب التفاعلية والمستجيبة بشكل أفضل.