DOM في جافاسكربت

الخطوات العملية:

1. تنزيل أداة اختبار DOM:
   • Google Chrome: افتح "أدوات المطور" (F12) وانقر على علامة تبويب "العناصر".
   • Firefox: افتح "أدوات المطور" (F12) وانقر على علامة تبويب "المفتش".
2. فحص وثيقة HTML:
   • احمِّل صفحة ويب في المتصفح.
   • افتح أداة اختبار DOM وسترى:
     • وثيقة HTML: الشجرة الكاملة لصفحة الويب.
     • النموذج كائن المستند (DOM): تمثيل متسلسل هرمي للشجرة.

المفاهيم الرئيسية:

• نموذج كائن المستند (DOM): تمثيل برمجي لوثيقة HTML.
• وثيقة HTML: المستند الذي يتم تحميله في المتصفح.
• شجرة DOM: تمثيل هرمي للعناصر داخل وثيقة HTML.
• العُقد: كيان فردي داخل شجرة DOM يمكن أن يكون عنصرًا أو نصًا أو تعليقًا.
• العناصر: العناصر الأساسية في وثيقة HTML، مثل <p> و<h1>.
• السمات: خصائص العناصر، مثل id وclass.
• النص: محتوى نصي داخل العناصر.

مثال جافاسكريبت:

const element = document.getElementById("myElement"); // احصل على عنصر حسب معرفه
console.log(element.innerHTML); // قم بطباعة محتوى نصي للعنصر
element.style.color = "red"; // قم بتغيير لون العنصر

هذا يوضح كيفية:

• استخدام جافاسكريبت للتفاعل مع عناصر DOM.
• التعامل مع DOM كتمثيل شجري لـ HTML.
• استخدام DOM لتغيير شكل ومحتوى صفحة الويب.