| المفهوم | التعريف |
|---|---|
| DOM | تمثيل شجري لصفحة HTML في الذاكرة |
| Node | أي عقدة في شجرة DOM |
| Element | عقدة تمثل وسم HTML |
| document | نقطة الدخول للتعامل مع DOM في الكود |
الـ DOM اختصار لـ Document Object Model، وهو تمثيل جافاسكريبت لصفحة HTML على شكل شجرة من الكائنات (Objects) يمكن للغة الوصول إليها وتعديلها ديناميكياً بعد تحميل الصفحة. عندما يُحمّل المتصفح ملف HTML، فإنه يقرأ الوسوم ويبني منها هذه الشجرة في الذاكرة — وليس ملف HTML نفسه هو ما تراه فعلياً، بل تمثيله كـ DOM.
كل وسم HTML في الصفحة يصبح "عقدة" (Node) في هذه الشجرة، ويُطلق على معظم هذه العقد اسم "عناصر" (Elements). العلاقة بين العناصر هرمية تماماً كشجرة العائلة: يوجد عنصر جذر (document)، ثم html كابنه المباشر، ثم head وbody كأبناء لـ html، وهكذا كل وسم داخل وسم آخر يُصبح "ابناً" له، والوسم المحيط "أباً" له.
ما يجعل الـ DOM قوياً جداً هو أنه ليس مجرد تمثيل ثابت للصفحة، بل هو "حي" (Live) — أي تعديل تُجريه عليه عبر جافاسكريبت (إضافة عنصر، تغيير نص، تعديل تصميم) ينعكس فوراً على الصفحة المرئية أمام المستخدم دون الحاجة لإعادة تحميل الصفحة بالكامل. هذا هو أساس كل التطبيقات التفاعلية الحديثة على الويب.
نقطة الدخول الأساسية للتعامل مع الـ DOM في الكود هي الكائن العام document، والذي يوفر عشرات الدوال والخصائص للوصول للعناصر وتعديلها والتفاعل معها. من المهم فهم أن الـ DOM منفصل تماماً عن ملف HTML الأصلي — تعديل الـ DOM لا يُغيّر الملف على الخادم أبداً، بل فقط ما يراه المستخدم الحالي في متصفحه.
| 1 | // document هو نقطة الدخول للتعامل مع DOM |
| 2 | console.log(document); // كائن الوثيقة بالكامل |
| 3 | console.log(document.body); // وسم body |
| 4 | console.log(document.title); // عنوان الصفحة |
| 5 | |
| 6 | // هيكل الشجرة |
| 7 | // document > html > (head, body) > عناصر أخرى... |
مثال 1: HTML كشجرة DOM يمكن استكشافها
| 1 | <!-- في HTML --> |
| 2 | <div id="app"> |
| 3 | <h1>عنوان</h1> |
| 4 | <p>فقرة نصية</p> |
| 5 | </div> |
| 6 | |
| 7 | <script> |
| 8 | // كل وسم أصبح عنصراً في شجرة DOM يمكن الوصول إليه |
| 9 | console.log(document.getElementById("app")); |
| 10 | console.log(document.body.children); // كل أبناء body |
| 11 | </script> |
مثال 2: الطبيعة الحية للـ DOM
| 1 | // الـ DOM حي: التعديل ينعكس فوراً بدون إعادة تحميل |
| 2 | document.title = "عنوان جديد"; // يتغير تبويب المتصفح فوراً |
| 3 | document.body.style.backgroundColor = "#f0f0f0"; // يتغير لون الصفحة فوراً |