مرحبًا، مطوري جافا سكريبت المذهلين؟

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

استخدام DOM للتفاعل

يمكن تنفيذ العديد من العمليات على نموذج كائن المستند (DOM) بواسطة JavaScript، بما في ذلك:

• تعديل محتوى عناصر HTML
• إضافة أو إزالة العناصر والسمات
• الاستجابة لأحداث المستخدم مثل النقرات أو الضغط على المفاتيح
• إنشاء أحداث جديدة داخل الصفحة

مثال

يمكنك استخدام JavaScript لتغيير محتوى العنصر عن طريق استهدافه باستخدام الدالة document.getElementById() ثم تغيير خاصية HTML الداخلية للعنصر:

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

هيكل DOM

كائن المستند موجود في قاعدة DOM، وهو منظم على شكل شجرة من الكائنات. يتم تمثيل كل عنصر HTML كعقدة في الشجرة، وهذه العقد قادرة على الحصول على الأحداث والأساليب والخصائص ذات الصلة. من خلال تقديم طرق للتنقل والعمل مع هذه العقد، يمكّن DOM البرامج النصية من تغيير الصفحة في الوقت الفعلي.

إليك مثال أساسي لما قد تبدو عليه شجرة DOM النموذجية لمستند HTML:

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

وظيفة DOM في تطوير الويب

يعد DOM ضروريًا لتطوير الويب لعدد من الأسباب.

• يجعل من الممكن إنشاء صفحات ويب ديناميكية وتفاعلية عن طريق السماح للبرامج النصية بتغيير نمط الصفحة ومحتواها استجابةً لإدخال المستخدم.
• يضمن التوحيد عبر الأنظمة الأساسية من خلال تقديم واجهة موحدة لمختلف المتصفحات للتفاعل مع الصفحات عبر الإنترنت ومعالجتها.
• تعتمد تطبيقات الصفحة الواحدة (SPA) على DOM لتحديث الصفحة دون الحاجة إلى إعادة التحميل، وبالتالي فهي ضرورية لتشغيلها.

مستويات ومعايير DOM

يحتفظ اتحاد شبكة الويب العالمية (W3C) بمعيار DOM، الذي يضمن موثوقيته واتساقه عبر متصفحات وأنظمة الويب المختلفة. يتم تقسيم المعيار إلى أقسام ومستويات مختلفة، بما في ذلك:

• النموذج الأساسي لجميع أنواع المستندات هو * Core DOM:.
• يسمى نموذج مستند XML XML DOM.
• HTML DOM: تم إنشاء النموذج خصيصًا لملفات HTML.

تتم إضافة المزيد من الإمكانيات والوظائف مع كل إصدار قياسي من DOM، مما يتيح عمليات معالجة وتفاعلات أكثر تعقيدًا للمستندات عبر الإنترنت.

رسم توضيحي واقعي لتلاعب DOM

إليك توضيح واقعي لكيفية التواصل مع مستند HTML باستخدام DOM:

Hello, World!
Change Header

في هذا المثال، يؤدي النقر فوق الزر إلى استدعاء وظيفة ChangeHeader()، التي تستخدم DOM للوصول إلى العنصر

من خلال معرفه. ثم يقوم بتغيير محتوى النص ولون الرأس.

تقنيات DOM الأساسية

1. اختيار الاستعلام

استخدم document.querySelector() لالتقاط العناصر بدقة متناهية.

شرح: يسمح لك querySelector() بتحديد العناصر باستخدام محددات CSS، مما يجعلها وسيلة قوية ومرنة للوصول إلى عناصر DOM.

مثال

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. المحتوى الديناميكي


 قم بتعديل محتوى HTML الداخلي أو محتوى النص لتحديث محتوى الصفحة بسرعة. 

شرح: يتيح لك محتوى HTML الداخلي أو textContent تغيير محتوى العناصر ديناميكيًا، مما يتيح لك صفحات ويب تفاعلية وسريعة الاستجابة.


  
  
  مثال




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';





  
  
  3. الاستماع للحدث


 قم بإرفاق addEventListener() بعناصر تجارب المستخدم التفاعلية. 

شرح: تتيح لك addEventListener() الاستجابة لإجراءات المستخدم مثل النقرات أو الضغطات على المفاتيح أو حركات الماوس، وإنشاء تطبيقات ويب تفاعلية.


  
  
  مثال




const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});





  
  
  4. اجتياز DOM


 انتقل إلى شجرة DOM باستخدام خصائص العقدة الأصلية والفرعية والأشقاء. 

شرح: يتيح لك DOM Traversal التنقل عبر بنية المستند، والوصول إلى العناصر ذات الصلة بناءً على موضعها في شجرة DOM.


  
  
  مثال




const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;





  
  
  خاتمة


 يعد DOM أداة قوية في JavaScript تمكن المطورين من إنشاء تجارب ويب غنية وتفاعلية. من خلال فهم DOM واستخدامه، يمكن للمطورين التحكم في سلوك ومظهر صفحات الويب، مما يجعلها أكثر جاذبية واستجابة لتفاعلات المستخدم.