Document Object
نموذج كائن المستند: دليل شامل للمبتدئين
مقدمة
نموذج كائن المستند (Document Object Model أو DOM) هو واجهة برمجة تطبيقات (API) للوثائق المستندة إلى HTML وXML. ببساطة، هو تمثيل هيكلي لوثيقة الويب، يسمح للبرامج النصية مثل JavaScript بالوصول إلى عناصر الصفحة والتلاعب بها ديناميكيًا. فهم DOM ضروري لأي شخص يعمل في برمجة الويب، خاصةً في تطوير الواجهات الأمامية. هذا المقال موجه للمبتدئين ويهدف إلى تقديم شرح مفصل لـ DOM وكيفية استخدامه.
ما هو نموذج كائن المستند؟
تخيل أن لديك صفحة ويب مكتوبة بلغة HTML. المتصفح لا يقرأ HTML مباشرةً. بدلاً من ذلك، يقوم بتحليل كود HTML وبناء شجرة هيكلية تمثل العناصر والعلاقات بينها. هذه الشجرة هي ما يعرف بنموذج كائن المستند. كل عنصر في صفحة HTML (مثل الفقرات، العناوين، الصور، الروابط، إلخ) يُمثل كـ "كائن" في هذه الشجرة.
هيكل نموذج كائن المستند
تتكون شجرة DOM من عدة أنواع من العقد (Nodes):
- عقدة المستند (Document Node): هي الجذر الرئيسي للشجرة، وتمثل كامل الوثيقة.
- عقدة العنصر (Element Node): تمثل عناصر HTML مثل `
`, `
`, ``.
- عقدة النص (Text Node): تمثل النص الموجود داخل عناصر HTML.
- عقدة السمة (Attribute Node): تمثل سمات HTML مثل `id`, `class`, `src`.
الوصول إلى عناصر DOM
هناك عدة طرق للوصول إلى عناصر DOM باستخدام JavaScript:
- getElementById(): يستخدم للحصول على عنصر بناءً على قيمة سمة الـ `id` الخاصة به. مثال: `document.getElementById("myElement");`
- getElementsByClassName(): يستخدم للحصول على مجموعة من العناصر بناءً على قيمة سمة الـ `class` الخاصة بها. مثال: `document.getElementsByClassName("myClass");`
- getElementsByTagName(): يستخدم للحصول على مجموعة من العناصر بناءً على اسم العلامة (Tag Name). مثال: `document.getElementsByTagName("p");`
- querySelector(): يستخدم للحصول على أول عنصر يطابق محدد CSS معين. مثال: `document.querySelector("#myElement");`
- querySelectorAll(): يستخدم للحصول على جميع العناصر التي تطابق محدد CSS معين. مثال: `document.querySelectorAll(".myClass");`
التلاعب بعناصر DOM
بمجرد الوصول إلى عنصر DOM، يمكنك التلاعب به بعدة طرق:
- تغيير المحتوى: يمكنك تغيير النص أو HTML داخل العنصر باستخدام `innerHTML` أو `textContent`.
- تغيير السمات: يمكنك تغيير قيم سمات العنصر باستخدام `setAttribute()` و `getAttribute()`.
- تغيير الأنماط: يمكنك تغيير أنماط CSS للعنصر باستخدام `style`.
- إضافة وإزالة العناصر: يمكنك إضافة عناصر جديدة إلى DOM باستخدام `createElement()`, `appendChild()`, و `insertBefore()`. يمكنك إزالة العناصر باستخدام `removeChild()`.
أهمية DOM في تطوير الويب
DOM هو أساس العديد من التقنيات المستخدمة في تطوير الويب الحديث، بما في ذلك:
- JavaScript Frameworks: أطر العمل مثل React و Angular و Vue.js تعتمد بشكل كبير على DOM للتحديث الديناميكي لواجهة المستخدم.
- AJAX: تقنية AJAX تستخدم DOM لتحديث أجزاء من الصفحة دون الحاجة إلى إعادة تحميل الصفحة بأكملها.
- الرسوم المتحركة: يمكن استخدام DOM لإنشاء رسوم متحركة وتأثيرات بصرية.
- تطبيقات الويب التفاعلية: DOM يسمح بإنشاء تطبيقات ويب تفاعلية تستجيب لإجراءات المستخدم.
مثال عملي
```javascript <!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body>
Hello, World!
<button onclick="changeText()">Change Text</button>
<script> function changeText() {
document.getElementById("myHeading").textContent = "Hello, DOM!";
} </script>
</body> </html> ```
في هذا المثال، نستخدم `getElementById()` للوصول إلى عنصر `