مدونة جوارا: ما هو DOM في لغة JavaScript

ما هو DOM في لغة JavaScript؟

يا هلا! خلينا ندخل بالموضوع مباشرة بدون فلسفة.

DOM باختصار شديد

الـ DOM (اختصار لـ Document Object Model) هو ببساطة واجهة برمجية (API) للمستندات اللي على الويب، يعني صفحات الـ HTML أو XML.

تخيل صفحة الويب بتاعتك (اللي هي HTML) كشجرة عائلة. كل عنصر في الـ HTML (زي

أو

أو ) هو "عضو" في هذي الشجرة. الـ DOM بيحول هذي الشجرة لأشياء (Objects) تقدر لغة الـ JavaScript تفهمها وتتعامل معاها.

الملاحظة السريعة: الـ DOM مو جزء من لغة JavaScript نفسها! هو واجهة مستقلة بيوفرها المتصفح، والـ JavaScript هي اللغة اللي بنستخدمها عشان نتكلم مع هذي الواجهة.

ليه الـ DOM مهم؟

بدون الـ DOM، الـ JavaScript ما تقدر تشوف أو تلمس أي شيء في صفحة الويب. هي اللي بتخلي الـ JavaScript تقدر:

تغير محتوى النصوص (مثلاً، تحديث عداد).
تعدل في خصائص العناصر (مثلاً، تغيير src لصورة).
تغير شكل العناصر (الألوان، الأحجام، المخفي/الظاهر).
تضيف عناصر جديدة للصفحة أو تحذف عناصر موجودة.
تستجيب لأفعال المستخدم (نقرات الماوس، ضغطات الكيبورد).

كيف الـ DOM بيشوف الصفحة؟

الـ DOM بيشوف كل شيء في صفحة الـ HTML كـ "عقدة" (Node). في أنواع مختلفة من العقد:

Document Node: هي العقدة الأساسية، بتمثل صفحة الويب كلها.
Element Node: بتمثل عناصر الـ HTML زي ،
،
.
Text Node: بتمثل النصوص اللي داخل العناصر.
Attribute Node: بتمثل خصائص العناصر زي id="myDiv" أو class="active".

كل هذي العقد مترابطة في هيكل شجري، تقدر تتنقل بينها (من الأب للابن، من الأخ للأخ).

مثال سريع: كيف الـ JavaScript تتعامل مع الـ DOM؟

خلنا نشوف كيف الـ JavaScript ممكن تعدل على عنصر في الصفحة.

عندنا HTML بسيط:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مثال DOM</title>
</head>
<body>
    <h1 id="myHeading">مرحبا بك في عالم الـ DOM!</h1>
    <button onclick="changeText()">غير النص</button>

    <script>
        function changeText() {
            // الوصول للعنصر اللي الـ ID بتاعه 'myHeading'
            const headingElement = document.getElementById('myHeading');
            // تغيير محتوى النص
            headingElement.textContent = 'النص الجديد بعد التعديل!';
            // تغيير اللون
            headingElement.style.color = '#e74c3c';
        }
    </script>
</body>
</html>

في هذا المثال:

استخدمنا document.getElementById('myHeading') عشان نوصل للعنصر
اللي الـ id بتاعه هو myHeading.
عدلنا على خاصية textContent عشان نغير النص اللي داخل الـ
.
عدلنا على خاصية style.color عشان نغير لون النص.

هذا مجرد غيض من فيض، الـ DOM يفتح لك أبواب كثيرة للتحكم بصفحتك بشكل ديناميكي.

أدوات DOM الشائعة

بعض الطرق اللي تستخدمها الـ JavaScript عشان تتفاعل مع الـ DOM:

document.getElementById('id-name'): للوصول لعنصر عن طريق الـ ID.
document.querySelector('css-selector'): للوصول لأول عنصر يطابق محدد CSS.
document.querySelectorAll('css-selector'): للوصول لكل العناصر اللي تطابق محدد CSS.
element.innerHTML: للحصول على أو تعديل محتوى HTML الداخلي للعنصر.
element.textContent: للحصول على أو تعديل محتوى النص الداخلي للعنصر (بدون HTML).
element.setAttribute('attribute', 'value'): لتغيير خاصية لعنصر.
element.addEventListener('event', handlerFunction): للاستجابة للأحداث (مثل النقر).
document.createElement('tagName'): لإنشاء عنصر HTML جديد.
parentNode.appendChild(childElement): لإضافة عنصر كابن لعنصر آخر.

خلاصة

الـ DOM هو الجسر اللي بيربط بين صفحة الويب الساكنة (HTML) وقدرات الـ JavaScript التفاعلية. فهمك له هو أساس بناء أي تطبيق ويب حديث ومتحرك.

بالتوفيق!

← السابق الفهرس التالي →

ما هو DOM في لغة JavaScript