BOM اختصار لـ Browser Object Model، وهو نموذج كائني (Object Model) يوفره المتصفح للتعامل مع النافذة والبيئة المحيطة بالصفحة (وليس المحتوى نفسه). يمكن القول إن BOM يمكّنك من الوصول إلى أشياء مثل: 🧱 مكونات BOM الرئيسية: 1. window هو الكائن…
🎯 ما المقصود بـ DOM Traversing؟ هي طرق للوصول إلى عناصر مرتبطة ببعضها مثل: ✅ أهم دوال وخصائص DOM Traversing الخاصية/الدالة الوصف .parentElement العنصر الأب .children جميع الأبناء (HTMLCollection) .firstElementChild أول عنصر ابن .lastElementChild آخر عنصر ابن .nextElementSibling العنصر الأخ…
✅ لإضافة عناصر أو نصوص أو حذفها داخل أو خارج عنصر معيّن لنفترض أن لدينا هذا العنصر: ✅ 1. before() ➕ يضيف عنصر قبل العنصر الحالي في نفس المستوى (خارج العنصر) ✅ 2. after() ➕ يضيف عنصر بعد العنصر الحالي…
كيف نُضيف ونُغيّر تنسيقات العناصر باستخدام JavaScript 🔹 أنواع تنسيق العناصر (Styling Methods) ✅ أولًا: التنسيق باستخدام خاصية style يمكنك الوصول لأي خاصية CSS باستخدام element.style.<property> 📌 مثال: خصائص CSS مثل background-color → تكتب في JS هكذا: backgroundColor (CamelCase) القيم…
👉 كائن classList للتحكم في أصناف العناصر (CSS Classes) 📌 ما هو classList؟ هو كائن موجود داخل أي عنصر HTML، يسمح لك بـ: بدلاً من استخدام element.className = …يمكنك استخدام element.classList بطريقة أكثر أمانًا ومرونة. ✅ أهم الدوال (methods) في…
الأحداث هي ما يجعل صفحات الويب تفاعلية.مثال: عند الضغط على زر – الكتابة في حقل – تمرير الماوس – إلخ… 🟦 ما هو الـ Event؟ هو شيء يحدث في الصفحة، مثل: نوع الحدث ماذا يعني؟ click عند الضغط على عنصر…
🟦 أولًا: ماذا نقصد بـ “العناصر الأبناء”؟ في HTML: العنصر <div> هو الأب،والعناصر <p>, <span> هي الأبناء (children). 🟦 طرق التعامل مع الأبناء في JavaScript ✅ 1. element.children ✅ 2. element.childNodes ✅ 3. الوصول لأول وآخر ابن: الدالة النتيجة firstElementChild…
إنشاء عناصر (Create Elements) وإضافتها إلى الصفحة (Append Elements) باستخدام JavaScript بطريقة احترافية مع أمثلة تطبيقية. 🟦 أولًا: إنشاء عناصر — document.createElement(tagName) هذه الدالة تُستخدم لإنشاء عنصر HTML جديد (وليس إضافته بعد). الآن newDiv عبارة عن عنصر <div>، لكن لم…
🟦 أولاً: التعامل مع المحتوى (Content) يوجد 3 خصائص أساسية للتحكم في محتوى العناصر: الخاصية الوصف تقرأ النص؟ تكتب نص؟ تقرأ HTML؟ تكتب HTML؟ textContent النص فقط ✅ ✅ ❌ ❌ innerText النص المعروض (أشبه بـ CSS visible) ✅ ✅…
DOM أو Document Object Model هو نموذج هيكلي (شجري) يمثل صفحة الويب في المتصفح. بمجرد تحميل الصفحة، يقوم المتصفح بترجمتها إلى شجرة من العناصر (Nodes) يمكن التعامل معها باستخدام JavaScript. ما هو الـ DOM؟ DOM هو اختصار لـ Document Object…