JavaScript: التعامل مع نموذج كائن المستند (DOM)

Name: JavaScript: التعامل مع نموذج كائن المستند (DOM)
Author: Joseph Barrett

كيفية استخدام نموذج غرض المستند

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ6.

دورة تدريبية: عند الطلب

إنشاء وإدراج عناصر جديدة في هذا الدرس سننظر في إنشاء وإدراج عناصر جديدة في نموذج كائن المستند لذلك دعونا نرى ما لدينا حتى الآن حصلت على مربع اختيار حديقتك المتنوعة هنا ولدي حجم خمسة محدد بحيث يظهر في شكل مربع قائمة ولدينا بعض عناصر الخيارات الموجودة لنفترض، على سبيل المثال، ربما يكون هذا موقع سفر يريد الناس اختيار مدينة لزيارتها نعطيهم بعض الخيارات الافتراضية نريد أيضًا السماح لهم بإضافة مدينة جديدة إلى القائمة وسيكون بإمكانهم فعل ذلك عن طريق كتابة اسم المدينة هنا الآن هذا لا يعمل بعد سنقوم بإضافة الكود لجعله يفعل ذلك لذلك، لدي معالج حدث هنا لزر الإرسال ولقد قمت باختيار يمثل هذا المربع وهو لدينا بالفعل هنا لذلك سأقوم بخطوتين هنا أول شيء هو أنني سأقوم بإنشاء عنصري الجديد والثاني هو أنني سأقوم بإدخاله في العنصر الموجود في مكان معين هذه مجرد طريقة مساعدة صغيرة قمت بإنشائها تسمح لي بأخذ مدينة بها مسافات في الاسم وتحويل ذلك إلى قيمة محددة هناك لكن جوهر هذا لاحظ أنني أقوم بإنشاء document.createElement وأنا أقوم بإنشاء عنصر خيار عندما تريد تحديد سمات لهذا العنصر يمكنك ببساطة تمييز هؤلاء بقيمهم إذن، ستكون القيمة هي تلك السلسلة ذات الأحرف الصغيرة التي أقوم بإنشائها هنا وسيكون النص هو القيمة الفعلية من مربع المدينة الذي فعلناه هناك لذلك أنشأنا ذلك الآن كيف نحصل عليه إلى حيث نريده أن يكون؟ ولدينا طريقتان مختلفتان يمكننا اللجوء إليهم هنا الأول هو prepend لذلك أنا آخذ هذا العنصر المحدد وهذا فقط يُدرجه قبل العنصر الفرعي الأول لذا، إذا عدنا إلى هنا وألقينا نظرة هناك مجموعتك من العناصر الفرعية لمربع قائمة التحديد لذا سآخذ ذلك سأضيف ذلك في البداية فلنكتب طوكيو وأضغط على زر الإرسال وهناك يجعله أول واحد هناك الآن، يمكننا أيضًا القيام بذلك بطريقة مختلفة قليلاً لدينا أيضا insertBefore إدراج قبل يأخذ العنصر الذي سنقوم بإدراجه العنصر الذي سنقوم بإدراجه كمعامل أول ويقول إلى أين نريده أن يذهب في هذه الحالة، العقد الفرعية للصفر child nodes (0) ودعنا نحفظ ذلك ونعيد الصفحة مرة أخرى وهذا يجب أن يصل إلى هناك في البداية مرة أخرى نحن بالتأكيد لسنا مقيدين بالعنصر الأول أستطيع أن أقول أن أفعل ذلك وينتهي بنا الأمر أنها هنا بالأسفل لاحظ الآن أن هذا ليس العنصر الرابع أو حتى الخامس ولكن ما عليك أن تفهمه حول هذه العناصر هي أن الخيارات ليست العقد الوحيدة الموجودة هناك المسافة البيضاء، على سبيل المثال، تأتي كعقدة نصية node لذلك عليك أن تراقب بحذر شديد عندما تقوم بالزحف إلى العناصر الموجودة في تلك المجموعة الآن، إذا كنت تريد إدخاله في النهاية يمكننا القيام بذلك أيضًا دعنا نجرب ذلك كطريقة أخرى للقيام بذلك ها نحن وإلحاقه append يضعه في النهاية لذا إذا حاولنا هذا مرة أخرى ها نحن ذا، هذا هو الأخير لذلك تعلمنا في هذا الدرس عدة طرق مختلفة للتأكد من ظهور عنصرنا الجديد في مكان معين في العنصر الموجود في DOM أو نموذج كائن المستند شكرا للمشاهدة في درسنا التالي، سنتحدث أكثر عن التنقل عبر التسلسل الهرمي لنموذج كائن المستند

متوسط مقدِّم الخدمة : Joseph Barrett 6 الدروس · 29m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

إنّ نموذج كائن المستند دالة أساسية من دوال جافا سكريبت. ستتعلّم في هذه الدورة إنشاء وإدراج عناصر داخل نموذج كائن المستند وكيفية تصفّح النموذج بالإضافة إلى طرق نقل عناصر النموذج ضمن الصفحة الإلكترونية. ستحل تماريناً عن كيفية تغيير مظهر صفحتك الإلكترونية وطريقة تغيير خصائص HTML. أخيراً، ستتعلم أساليباً لتغيير صفحات التنسيق النمطية (سي إس إس) والتي تشرح آلية الظهور المرئي لصفحتك على الشاشة.

ما ستتعلمه

إنشاء عناصر جديدة وإدراجها في نموذج كائن المستند (DOM) باستخدام JavaScript
التنقل في DOM لتحديد عناصر الصفحة والعمل معها
نقل العناصر داخل صفحة الويب
تغيير مظهر الصفحة والتعامل مع سمات HTML
تطبيق نصائح وحيل للعمل مع أوراق الأنماط المتتالية (CSS) في JavaScript

النقاط الرئيسية

نموذج كائن المستند (DOM) وظيفة أساسية في JavaScript.
يمكن استخدام JavaScript لإنشاء عناصر وإدراجها في DOM والتنقل فيه.
يمكن نقل العناصر داخل صفحة الويب وتغيير سمات HTML الخاصة بها باستخدام JavaScript.
تصف أوراق الأنماط المتتالية (CSS) مظهر الصفحة بصريًا على الشاشة، وتغطي الدورة نصائح لتعديلها.

الأسئلة الشائعة

ما الذي تغطيه هذه الدورة؟

تغطي الدورة إنشاء العناصر وإدراجها في DOM، والتنقل في DOM، ونقل العناصر داخل صفحة الويب، وتغيير مظهر الصفحة، وتغيير سمات HTML، ونصائح لتعديل أوراق الأنماط المتتالية (CSS).

ما المهارات التي سأكتسبها من هذه الدورة؟

ستبني مهارات في نموذج كائن المستند، ونصوص DOM البرمجية، ونماذج كائنات مستندات HTML، ونصوص HTML البرمجية، ولغة JavaScript (لغة البرمجة)، وJavaScript الكائنية التوجه.

هل تتضمن الدورة تدريبًا تطبيقيًا؟

نعم، ستجري تمرينًا على كيفية تغيير مظهر صفحتك.

ما الدروس المتضمنة؟

الدروس هي: إنشاء عناصر جديدة وإدراجها، والتنقل في DOM، ونقل العناصر على الصفحة، وتغيير مظهر الصفحة، والتعامل مع السمات، وحيل CSS وJavaScript.