ما هو DOM وكيف يمكن استخدامه مع HTML؟

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

ما هو DOM وكيف يمكن استخدامه مع HTML؟

Document Object Model (DOM) هو واجهة برمجية تمكّن المتصفحات من التعامل مع هيكل صفحة الويب وتعديلها ديناميكيًا باستخدام لغات برمجة مثل JavaScript. بعبارة أخرى، يسمح DOM للمطورين بالتفاعل مع مكونات HTML في صفحة الويب بشكل مباشر، مما يوفر إمكانية تعديل العناصر، إضافة المحتوى، وتغيير التصميم بشكل ديناميكي دون الحاجة إلى إعادة تحميل الصفحة.

ما هو DOM؟

DOM هو نموذج برمجي يمثل هيكل مستندات HTML أو XML كشجرة تحتوي على مجموعة من العقد (Nodes). كل عنصر في صفحة HTML يُعتبر عقدة في هذه الشجرة، بما في ذلك الوسوم، النصوص، التعليقات، وما إلى ذلك. هذه العقد يتم تنظيمها في هيكل هرمي يبدأ من الجذر، والذي في حالة مستند HTML هو عنصر <html>.

عند تحميل صفحة ويب في المتصفح، يقوم المتصفح ببناء نموذج DOM الخاص بالمستند، مما يسمح لنا بالتفاعل معه باستخدام JavaScript.

مكونات DOM الرئيسية

DOM يتكون من عدة مكونات رئيسية:

  • العقد (Nodes): هي العناصر الأساسية التي تشكل DOM، مثل الوسوم النصية أو عناصر HTML.
  • العناصر (Elements): هي نوع خاص من العقد التي تمثل عناصر HTML مثل <div>، <p>، وغيرها.
  • السمات (Attributes): هي معلومات إضافية يمكن إضافتها للعناصر مثل class، id، وما إلى ذلك.
  • النصوص (Text): هي العقد التي تحتوي على نصوص داخل عناصر HTML.

كيفية استخدام DOM مع HTML

DOM يسمح للمطورين بالتفاعل مع HTML باستخدام JavaScript لتنفيذ العديد من العمليات مثل:

  • تعديل محتوى الصفحة.
  • تغيير أنماط CSS.
  • إضافة أو حذف عناصر HTML.
  • التفاعل مع المستخدم من خلال الأحداث.

مثال بسيط على استخدام DOM مع HTML

لنلقِ نظرة على مثال بسيط يوضح كيفية استخدام JavaScript للتفاعل مع DOM وتعديل عنصر HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مثال على DOM</title>
    <style>
        #demo {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <h1>مثال على DOM</h1>
    <p id="demo">مرحبًا بكم في صفحة المثال!</p>

    <button onclick="changeContent()">تغيير المحتوى</button>

    <script>
        function changeContent() {
            document.getElementById('demo').innerHTML = 'تم تغيير النص!';
        }
    </script>

</body>
</html>

في هذا المثال، قمنا بإنشاء صفحة HTML تحتوي على عنصر <p> مع معرف id="demo". عندما ينقر المستخدم على الزر "تغيير المحتوى"، يتم استدعاء دالة JavaScript changeContent()، التي تقوم بتغيير النص داخل العنصر <p> باستخدام DOM.

أهم العمليات التي يمكن القيام بها باستخدام DOM

DOM يسمح لك بتنفيذ مجموعة واسعة من العمليات على عناصر HTML في الصفحة. من بين هذه العمليات:

1. الوصول إلى عناصر HTML

للوصول إلى عناصر HTML من خلال DOM، يمكنك استخدام عدة طرق مثل:

  • getElementById(): للوصول إلى عنصر بناءً على معرفه (ID).
  • getElementsByClassName(): للوصول إلى جميع العناصر التي تحمل نفس الفئة (class).
  • getElementsByTagName(): للوصول إلى جميع العناصر التي تحمل نفس الوسم (tag).
  • querySelector(): للوصول إلى أول عنصر يطابق محدد CSS معين.
  • querySelectorAll(): للوصول إلى جميع العناصر التي تطابق محدد CSS معين.

مثال على الوصول إلى عنصر باستخدام getElementById

let element = document.getElementById('demo');
console.log(element); // سيعرض العنصر في وحدة التحكم

2. تعديل محتوى HTML

يمكنك استخدام خاصية innerHTML لتعديل محتوى أي عنصر HTML. مثال:

document.getElementById('demo').innerHTML = 'تم تعديل النص!';

3. تعديل أنماط CSS

DOM يسمح لك أيضًا بتعديل أنماط CSS لأي عنصر باستخدام خاصية style. على سبيل المثال:

document.getElementById('demo').style.color = 'red';

في هذا المثال، يتم تغيير لون النص داخل العنصر الذي يحمل المعرف "demo" إلى اللون الأحمر.

4. إضافة وحذف عناصر HTML

يمكنك أيضًا إضافة أو حذف عناصر HTML ديناميكيًا باستخدام DOM. على سبيل المثال، لإضافة عنصر جديد:

let newElement = document.createElement('p');
newElement.innerHTML = 'هذا عنصر جديد';
document.body.appendChild(newElement);

في هذا المثال، نقوم بإنشاء عنصر <p> جديد وإضافته إلى صفحة HTML.

5. التعامل مع الأحداث (Events)

DOM يتيح لك أيضًا التعامل مع الأحداث مثل النقر، التمرير، الإدخال وغيرها. يمكنك استخدام خاصية addEventListener() لتحديد الأحداث التي تريد التعامل معها. على سبيل المثال:

document.getElementById('demo').addEventListener('click', function() {
    alert('تم النقر على العنصر!');
});

في هذا المثال، يتم عرض رسالة تنبيه عند النقر على العنصر الذي يحمل المعرف "demo".

الخلاصة

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

طور مهاراتك: مقالات يجب قراءتها في البرمجة

مقالات ذات صلة

كيفية فرز المصفوفات في PHP
كيفية استخدام الـ HTML Forms لإرسال البيانات إلى PHP
كيفية استخدام PHP لإنشاء تقارير Excel
كيفية استخدام الجداول التفاعلية في HTML باستخدام JavaScript
كيفية إرسال واستقبال البيانات باستخدام نماذج HTML و PHP

البرمجة

الفرق بين العبارات التكرارية المختلفة في PHP
كيفية تقسيم النصوص باستخدام دالة split() في Python
التعرف على استخدامات الدوال في PHP
كيفية كتابة دوال (Functions) في PHP
كيفية استخدام الجداول في عرض البيانات باستخدام HTML
أفضل الممارسات لحماية تطبيقات PHP
التعامل مع استثناءات البرمجة باستخدام دالة raise في Python