🌟 مقدمة تحفيزية :

“مرحباً بك يا سيد الأكواد ! هل تساءلت يوماً كيف يتغير لون الزر عند الضغط عليه دون أن تختفي الصفحة ؟

أو كيف يظهر اسمك فجأة على الشاشة بعد كتابته ؟ هذا هو سحر الـ DOM .

اليوم في أكاديمية قياوي ، ستتعلم كيف تجعل JavaScript تمد يدها داخل ملف الـ HTML لتغير النصوص، الألوان ، والصور في أجزاء من الثانية .

أنت الآن لا تكتب كوداً فحسب ، بل تتحكم في الواقع الرقمي لموقعك !”

🏗️ 1 . ما هو الـ DOM ؟

هو اختصار لـ (Document Object Model) .

ببساطة : هو الجسر الذي يسمح لـ JavaScript بالوصول إلى عناصر الـ HTML وتعديلها . المتصفح يرى موقعك كـ “شجرة” من العناصر ، وأنت الآن تملك القوة لتغيير أي غصن فيها . 💻 2 . كيف نمسك بالعناصر ؟ (The Selectors)

قبل أن نغير أي شيء ، يجب أن “نمسك” بالعنصر أولاً باستخدام كود بسيط :

   JavaScript

// الإمساك بعنصر من خلال الـ ID الخاص به
let myTitle = document.getElementById("main-title");

// تغيير نص العنوان فجأة!
myTitle.innerHTML = "أهلاً بك في أكاديمية قياوي الاحترافية";

🎨 3 . تغيير التصميم (CSS) عبر JavaScript

يمكنك تغيير شكل الموقع بناءً على أحداث معينة :

   JavaScript

// تغيير لون النص إلى لون الأكاديمية البرتقالي
myTitle.style.color = "#e67e22";

// إخفاء عنصر أو إظهاره
myTitle.style.display = "none"; // يختفي
myTitle.style.display = "block"; // يظهر

⚖️ 4 . تطبيق عملي (تفاعلي)

لنصنع زراً يغير “حالة” الموقع من الوضع النهاري إلى الوضع الليلي :

 JavaScript  

function darkMode() {
    document.body.style.backgroundColor = "#2c3e50";
    document.body.style.color = "white"; }

💡 لماذا هذا الدرس هو مفتاح “الاحتراف”؟

في موقع qiyaouiacademy.com، الـ DOM هو المسؤول عن:

1 .         التفاعل الفوري  :   إظهار رسالة “شكراً لتواصلك” فور الضغط على زر الإرسال.

2 .         الجماليات   :   تغيير صور الدورات أو تحريك العناصر عند مرور الماوس.

3 .          تخصيص التجربة  :   عرض اسم الطالب المسجل في أعلى الصفحة بمجرد دخوله .

🎯 تحدي المحترفين :

“يا بطل ، قم بإنشاء صفحة HTML بسيطة فيها عنوان <H1 >وزر . حاول كتابة كود JavaScript يجعل العنوان يتغير إلى ‘لقد أصبحت مبرمجاً محترفاً !’ بمجرد الضغط على الزر . هل يمكنك أيضاً تغيير لون الخلفية ؟” .

للتوضيح : 

في هذا الدرس سنتعلم كيف يمكن لـ JavaScript التحكم الكامل في عناصر صفحة الويب باستخدام DOM.
سيكتشف الطالب كيف يمكن تغيير النصوص والألوان وإخفاء أو إظهار العناصر داخل الصفحة دون الحاجة إلى إعادة تحميلها.

عندما يفتح المتصفح صفحة ويب فإنه يحولها إلى هيكل من العناصر يمكن التحكم فيه . هذا الهيكل يسمى : Document Object Model بواسطة JavaScript يمكننا :

• تغيير النص
• تغيير اللون
• إخفاء عنصر
• إظهار عنصر

كل ذلك بدون إعادة تحميل الصفحة . 🖼 فكرة DOM   الصفحة تتحول إلى شجرة عناصر مثل : HTML ├── HEAD └── BODY ├── H1 ├── P └── BUTTON 🟢 اختيار عنصر في الصفحة نستعمل :        JAVASCRIPT

document.getElementById()

مثال : HTML

<p id="text">مرحبا بكم</p>

 JAVASCRIPT 

document.getElementById("text");

🟢 تغيير النص JAVASCRIPT

document.getElementById("text").style.color = "blue";

🟢 مثال عملي كامل

HTML

<p id="message">مرحبا بكم</p>

<button onclick="changeText()">غير النص</button>

<script>

function changeText(){

document.getElementById("message").innerHTML = "أهلاً بكم في Qiyaoui Academy";

}

</script>

🟢 النتيجة عند الضغط على الزر :

      يتغير النص داخل الصفحة مباشرة       بدون إعادة تحميل الصفحة .

🧠 لماذا DOM مهم ؟

لأنه يسمح للموقع أن يصبح : ✔ تفاعلي ✔ سريع ✔ ديناميكي وهذا ما يجعل المواقع الحديثة تعمل مثل التطبيقات .

🏆 تمرين للطلاب أنشئ :

•    عنوان
• زر

عند الضغط على الزر :                  يتغير لون العنوان                            باستخدام JavaScript و DOM .