DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
التلاعب بشجرة DOM هو الطريقة التي تتغيّر بها صفحة الويب بعد تحميلها — عرض رسالة، إضافة صف إلى جدول، التحقق من نموذج، الاستجابة لنقرة. يغطي هذا الدرس واجهات المتصفح الأصلية (getElementById وquerySelector وtextContent وclassList وaddEventListener وcreateElement) التي بُني فوقها كل إطار عمل.
ستعمل عبر أربعة فصول تتضمن أمثلة برمجية قابلة للتشغيل وعرضًا تفاعليًا لقائمة مهام يمكنك النقر عليه في متصفحك، إلى جانب كود DOM الخام المكافئ. كما يوضح كل فصل كيف تصف السلوك الذي تريده لمساعد ذكاء اصطناعي وتتحقق مما يعيده إليك.
في النهاية ستكون قادرًا على تحديد العناصر بأمان، وربط الأحداث، وعرض القوائم من مصفوفة بيانات، والتحقق من نموذج عند الإرسال، وتجنّب أنماط layout thrashing التي تجعل الصفحات تبدو بطيئة.
What's inside
- 1.تحديد العناصر — ما هي شجرة DOM، والعثور على العناصر باستخدام getElementById و querySelector، ووصف التغيير المطلوب لمساعد ذكاء اصطناعي.
- 2.النصوص والأنماط والأحداث — قراءة النصوص والسمات والأنماط وتغييرها، وربط أول مستمعي click و input لديك.
- 3.الأحداث والعرض — إنشاء العناصر وإزالتها، وتفويض الأحداث، وعرض شجرة DOM من مصفوفة بيانات.
- 4.النماذج والأداء — معالجة إرسال النموذج مع التحقق من الصحة، إضافةً إلى التجميع (batching) وتقنية debouncing لتطبيقات سريعة ومتجاوبة.