DOM Manipulation
Learn how to dynamically update web pages to create interactive business applications.
What You'll Learn
Description
מניפולציה של ה-DOM היא הדרך שבה עמוד אינטרנט משתנה אחרי שהוא נטען — הצגת הודעה, הוספת שורה לטבלה, ולידציה של טופס, תגובה ללחיצה. המדריך הזה מכסה את ממשקי ה-API המקוריים של הדפדפן (getElementById, querySelector, textContent, classList, addEventListener, createElement) שעליהם בנוי כל פריימוורק.
תעברו דרך ארבעה פרקים עם דוגמאות קוד ניתנות להרצה ודמו אינטראקטיבי של רשימת משימות שאפשר ללחוץ עליו ישירות בדפדפן, לצד קוד ה-DOM הווניל המקביל. כל פרק גם מראה איך לתאר לעוזר AI את ההתנהגות שאתם רוצים ולבדוק את מה שהוא מחזיר.
בסוף המדריך תדעו לבחור רכיבים בבטחה, לחבר אירועים, לרנדר רשימות ממערך נתונים, לבצע ולידציה לטופס בעת שליחה, ולהימנע מדפוסי layout thrashing שגורמים לעמודים להרגיש איטיים.
What's inside
- 1.בחירת רכיבים — מה זה ה-DOM, איתור רכיבים עם getElementById ו-querySelector, ותיאור השינוי הרצוי לעוזר AI.
- 2.טקסט, סגנונות ואירועים — קריאה ושינוי של טקסט, מאפיינים וסגנונות, וחיבור מאזיני ה-click וה-input הראשונים שלכם.
- 3.אירועים ורינדור — יצירה והסרה של רכיבים, האצלת אירועים, ורינדור ה-DOM ממערך נתונים.
- 4.טפסים וביצועים — טיפול בשליחת טופס עם ולידציה, ובנוסף איגוד עדכונים (batching) ו-debouncing לאפליקציות מהירות ורספונסיביות.