شرح ما هو الـ DOM؟ في لغة JavaScript بالتفصيل مع الأمثلة

شرح ما هو الـ DOM؟ في لغة JavaScript بالتفصيل مع الأمثلة | نوفيل

جدول مرجعي سريع

المفهوم	التعريف
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 -->
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>

ما هو الـ DOM؟

جدول مرجعي سريع

الشرح

الصياغة (Syntax)

أمثلة عملية

نصائح احترافية

1	// الـ DOM حي: التعديل ينعكس فوراً بدون إعادة تحميل
2	document.title = "عنوان جديد"; // يتغير تبويب المتصفح فوراً
3	document.body.style.backgroundColor = "#f0f0f0"; // يتغير لون الصفحة فوراً