before, after, prepend, append remove
✅ لإضافة عناصر أو نصوص أو حذفها داخل أو خارج عنصر معيّن لنفترض أن لدينا هذا العنصر: ✅ 1. before() ➕ يضيف عنصر قبل العنصر الحالي في نفس المستوى (خارج العنصر) ✅ 2. after() ➕ يضيف عنصر بعد العنصر الحالي…
CSS Styling & Stylesheets
كيف نُضيف ونُغيّر تنسيقات العناصر باستخدام JavaScript 🔹 أنواع تنسيق العناصر (Styling Methods) ✅ أولًا: التنسيق باستخدام خاصية style يمكنك الوصول لأي خاصية CSS باستخدام element.style.<property> 📌 مثال: خصائص CSS مثل background-color → تكتب في JS هكذا: backgroundColor (CamelCase) القيم…
Class List Object And Methods
👉 كائن classList للتحكم في أصناف العناصر (CSS Classes) 📌 ما هو classList؟ هو كائن موجود داخل أي عنصر HTML، يسمح لك بـ: بدلاً من استخدام element.className = …يمكنك استخدام element.classList بطريقة أكثر أمانًا ومرونة. ✅ أهم الدوال (methods) في…
DOM Events
الأحداث هي ما يجعل صفحات الويب تفاعلية.مثال: عند الضغط على زر – الكتابة في حقل – تمرير الماوس – إلخ… 🟦 ما هو الـ Event؟ هو شيء يحدث في الصفحة، مثل: نوع الحدث ماذا يعني؟ click عند الضغط على عنصر…
التعامل مع العناصر الأبناء (Children) في DOM
🟦 أولًا: ماذا نقصد بـ “العناصر الأبناء”؟ في HTML: العنصر <div> هو الأب،والعناصر <p>, <span> هي الأبناء (children). 🟦 طرق التعامل مع الأبناء في JavaScript ✅ 1. element.children ✅ 2. element.childNodes ✅ 3. الوصول لأول وآخر ابن: الدالة النتيجة firstElementChild…
Create And Append Elements
إنشاء عناصر (Create Elements) وإضافتها إلى الصفحة (Append Elements) باستخدام JavaScript بطريقة احترافية مع أمثلة تطبيقية. 🟦 أولًا: إنشاء عناصر — document.createElement(tagName) هذه الدالة تُستخدم لإنشاء عنصر HTML جديد (وليس إضافته بعد). الآن newDiv عبارة عن عنصر <div>، لكن لم…
Get – Set Content
🟦 أولاً: التعامل مع المحتوى (Content) يوجد 3 خصائص أساسية للتحكم في محتوى العناصر: الخاصية الوصف تقرأ النص؟ تكتب نص؟ تقرأ HTML؟ تكتب HTML؟ textContent النص فقط ✅ ✅ ❌ ❌ innerText النص المعروض (أشبه بـ CSS visible) ✅ ✅…
Document Object Model – DOM
DOM أو Document Object Model هو نموذج هيكلي (شجري) يمثل صفحة الويب في المتصفح. بمجرد تحميل الصفحة، يقوم المتصفح بترجمتها إلى شجرة من العناصر (Nodes) يمكن التعامل معها باستخدام JavaScript. ما هو الـ DOM؟ DOM هو اختصار لـ Document Object…
This Keyword in JavaScript
✅ أولًا: ما هي this؟ this هي كلمة مفتاحية تشير إلى الكائن (Object) الذي يستدعي الدالة (أو السياق الذي نُفذت فيه الدالة). لكن معناها يتغير حسب السياق الذي تُستدعى فيه. 🧭 الحالات الأساسية التي يتغير فيها this: السياق ماذا تشير…
Create Object with new Keyword
✅ أولًا: ما معنى new في JavaScript؟ عند استخدام الكلمة المفتاحية new، فإنك: 🔧 الصيغة العامة: 📌 مثال عملي: ✅ ما الذي حدث عند استخدام new Person(…)؟ ✅ فوائد استخدام new مع الدوال المنشئة: الفائدة الشرح ✅ إعادة الاستخدام لا…