מילון מושגים:
DOM - ייצוג עץ של מבנה דף HTML בזיכרון, שמאפשר לקוד לקרוא ולשנות את תוכן הדף ומבנהו.
תגובה - המידע שהשרת מחזיר ללקוח בתשובה לבקשה, הכולל בדרך כלל נתונים וקוד סטטוס.
מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.
CSS - שפת עיצוב שקובעת את המראה של דפי אינטרנט: צבעים, גופנים, מיקום וסידור הרכיבים.
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
URL - הכתובת שמזהה משאב באינטרנט, למשל דף אתר, וכוללת פרוטוקול, שם מארח ונתיב.
גופן - העיצוב הגרפי של האותיות והתווים המוצגים בטקסט, הכולל צורה, סגנון וגודל.
מתודה - פונקציה המוגדרת בתוך מחלקה ומתארת פעולה שאובייקטים מאותה מחלקה יכולים לבצע.
DOM
בשיעור זה אנו נכנסים לאחד הנושאים החשובים ביותר בג'אווה סקריפט, הנושא הנקרא Document Object Model, או בקיצור DOM. זהו נושא שמתאר מה קורה לדף ה-HTML בזיכרון של הדפדפן, למה דף ה-HTML הופך מבחינת כל התגיות, ואיך ג'אווה סקריפט יכולה להתערב בדף הזה כדי לבצע מה שהיא רוצה על תגיות הדפדפן.
נושאי הסיכום המוצגים בשיעור:
1. מהו ה-DOM: כאשר הדפדפן גולש לאתר, הוא מקבל בתמורה את התגובה, ה-Response, לבקשתו, שחלקה המרכזי הוא דף ה-HTML. הדפדפן מציג את תוכן ה-Body בגוף המסמך, אבל מאחורי הקלעים קורה משהו נוסף. דף ה-HTML הוא סטטי ולא ניתן לשנותו ישירות, אבל הדפדפן לוקח את כל התגיות ובונה מהן עץ אובייקטים, שבו כל תגית הופכת לאובייקט, כל תגית שנמצאת בתוכה הופכת אף היא לאובייקט, והכל בנוי בצורה היררכית שמתארת בדיוק את מבנה דף ה-HTML.
2. מהו אובייקט ואיך נוצר מהתגיות: אובייקט הוא תא זיכרון מורכב שמופיע בתוך הזיכרון ובנוי ממאפיינים. כל attribute של התגית ב-HTML הופך למאפיין של האובייקט בזיכרון, וניתן לשנות אותם באמצעות ג'אווה סקריפט. כלומר, מכל דף ה-HTML נוצר עץ אובייקטים שה-attributes של ה-HTML הפכו בו ל-properties של האובייקטים, והכל נמצא בזיכרון הדפדפן. ג'אווה סקריפט מסוגלת לגשת לעץ הזה, ששמו DOM, ולשנות בו כל דבר, לשנות מאפיינים, להסיר אובייקטים שלמים ולהוסיף אובייקטים חדשים שלא היו, וכל דבר שג'אווה סקריפט מבצעת על האובייקט הדפדפן מיד מציג במסמך.
3. צפייה בעץ באמצעות כלי המפתחים: אנו רצים את האתר ורואים כמה פסקאות ולינקים, וכל דפדפן מציע כלי למפתחים שנקרא Developer Tools, שנפתח ב-Internet Explorer באמצעות F12. בכלי רואים למעלה את הדף עצמו ולמטה את ה-HTML בצורה היררכית, ואפשר לפתוח את ה-HTML ולראות מה קיים בתוך המסמך. מה שמוצג כרגע הוא כאילו תמונה של ה-DOM, אנו רואים את מה שה-DOM חושף, וכשנוגעים ב-Body הדפדפן מסמן מה הוא כולל בתוכו, את ה-Div, בתוכו את הפסקה הראשונה, בתוכה את הטקסט, פסקה שנייה, פסקה שלישית שבתוכה לינק עם טקסט משלו, וכולי. אפשר להשתמש בתרשים הזה רק כדי לחקור אותו או לוודא מה כתוב בו.
4. יחסי הגומלין בעץ, משפחה של תגיות: ה-Div נמצא ישירות בתוך ה-Body ונחשב כצאצא שלו, כ-Child, ילד ישיר. שלוש הפסקאות נמצאות בתוך ה-Div וגם הן ילדות שלו, כאשר הילד הראשון נקרא First Child, והילד האחרון נקרא Last Child. מה הקשר בין הפסקה השנייה לפסקה הראשונה? הן נחשבות כאחיות, ואפשר להתייחס לזה ממש כמו עץ משפחה. הפסקה השנייה היא Next Sibling של הראשונה, והפסקה הראשונה היא Previous Sibling של השנייה כי היא נמצאת לפניה. ה-Div נחשב כ-Parent של הפסקות. כלומר, יש בעץ יחסי גומלין בין כל התגיות כמו במשפחה, ילדים, הורים ואחים.
5. גישה היררכית לעץ מתוך ג'אווה סקריפט: האובייקט הראשון שנמצא בעץ נקרא Window, שאותו כבר למדנו, ובתוכו מספר אובייקטים שאפשרו לנו להגיע ליכולות שונות של הדפדפן עצמו. אחד האובייקטים שעדיין לא דיברנו עליו הוא Document, שמתאר את מסמך ה-HTML עצמו כולו. בתוך ה-Document יש את ה-Body, ושם מתחילה ההיררכיה של תגיות ה-HTML. ה-Body הוא משהו שקיים בכל דף HTML, אבל המערכת אינה יכולה לדעת שבתוכו יש Div, ולכן היא לא נותנת שום Div, אלא מתחילה לתת את יחסי הגומלין, לדוגמה First Child. ה-First Child של ה-Body הוא בעצם ה-Div, מפני שהוא הילד הראשון שקיים עבור ה-Body ובמקרה הזה גם היחידי. נכנסים שוב אל תוכו אל First Child ורואים את הפסקה, ולפי ההיגיון, אילו היינו מגיעים אל Next Sibling, היינו מגיעים לפסקה הבאה. זו שיטה שמאפשרת להגיע לכל מיני אובייקטים בעץ ה-DOM, אבל היא מאוד מסורבלת ולא פרקטית, מפני שאם בהמשך נחליט להכניס עוד רכיב ב-HTML, הקוד של הג'אווה סקריפט כבר לא יתאים.
6. דוגמה לשינוי דרך ההיררכיה: רק לצורך הדוגמה אנו ניגשים לפסקה ומשנים לה את הצבע. מגיעים אל ה-Style ואל ה-BackgroundColor ומכניסים צבע רקע אחר. קוראים לפונקציה באירוע onLoad של ה-Body, שמתבצע כאשר הדפדפן טוען את המסמך אחרי שכל התגיות כבר נטענו. מרעננים ורואים שהצלחנו להגיע דרך הג'אווה סקריפט אל עץ האובייקטים, להגיע אל ה-Body, ואז אל התגית הראשונה שהייתה בו, שהיא ה-Div, ואז אל התגית הראשונה שבתוך ה-Div, ואז אל התגית הבאה בתור, אל ה-Next Sibling, ואז גשנו ל-CSS שלה, לצבע הרקע, והכנסנו אדום. כמובן שיותר נכון לתאר זאת בצורת אובייקטים, כי מה שניגשנו אליו הוא לא התגיות עצמן של ה-HTML, אלא עץ האובייקטים שנטען בזיכרון ומתאר בצורה מדויקת את התגיות האלה.
7. הדיאגרמה של עץ ה-DOM: אנו מחפשים בגוגל דיאגרמה של JavaScript DOM, נכנסים לאתר הראשון ומקבלים תרשים שמראה את עץ האובייקטים. האובייקט הראשון שקיים בעץ נקרא Window, שאותו כבר הכרנו, ובתוכו את ה-Navigator שגם ראינו לגביו דברים שונים, את האובייקט History שמאפשר להגיע אל ההיסטוריה של הדפדפן, ואת האובייקט Location שראינו ששייך ישירות ל-Window ומתאר את שורת ה-URL למעלה עם אפשרות להשיג כל מיני פרמטרים לגביה. יש אפשרות להגיע לכל המסגרות שקיימות בדפדפן, וכפי שראינו כשלמדנו על Window, דרכו אפשר להגיע אל עצמנו, אל Parent Window ואל Top Window. וכעת אנו הולכים לראות את ה-Document, שהוא האובייקט שדרכו מגיעים אל העץ, והוא מכיל את המסמך של כל התגיות.
8. האוסף document.all: בתוך ה-Document יש אוסף שנקרא All שמאפשר להגיע לכל האובייקטים בעץ בבת אחת, כאילו זהו מערך חד-ממדי, בניגוד להיררכיה. בודקים ומגלים שיש 15 רכיבים שונים בתוך ה-Document, אף שסופרים רק ארבע פסקאות וארבעה לינקים, סך הכל שמונה. הסיבה היא שכל מה שראינו ב-Developer Tools, כולל ה-head, ה-html, ה-body, ה-title וה-script, הוא חלק מהעץ, ולכן מונים 15 פריטים. מריצים בלולאה על document.all.length ומציגים באלרט את document.all[i].tagName, את שם התגית, ורואים את הרצף המלא, סימן קריאה, html, head, title, script, body, div, הפסקאות והלינקים. לאחר מכן עוברים על כל התגיות ומשנים לכל אחת את צבע ה-CSS לאדום, ורואים שהמערכת התעלמה מתגיות שאין להן יכולת צבע גופן, כמו body, html, head, title ו-script. זו הייתה שיטה נוספת לבצע פעולה על הרכיבים שנמצאים ב-DOM.
9. ריצה על אוסף ה-Links: בדיאגרמה ראינו שבתוך ה-Document יש אוסף של Links, שהוא array של אובייקטי לינק. מריצים על אוסף ה-Links, מציגים בהתחלה מסג'בוקס שמציג כמה לינקים קיימים, ארבעה, ואחר כך רצים על הלינקים וצובעים כל אחד בצבע גופן או בצבע רקע, וכל הלינקים נצבעים בצבע הנבחר. כאן רצנו על אוסף הלינקים שקיימים בדף עצמו.
10. ריצה על ChildNodes: אם מגיעים לתגית מסוימת ויודעים בוודאות שיש לה תגיות פנימיות, אפשר לרוץ על כל הילדים של אותה תגית בבת אחת. בודקים את document.body.firstChild, שהוא ה-Div, ואז את childNodes.length. ה-Node, צומת בתרגום לעברית, הוא רכיב בעץ ההיררכיה, וכל אחד מהרכיבים בעץ נקרא צומת או Node. מריצים על כל הילדים הישירים של ה-Div, שהם ארבע הפסקאות ושני הלינקים שבתוכו, ומשנים לכל אחד את ה-Style לירוק. שתי הפסקאות ושני הלינקים שמחוץ ל-Div אינם ילדים ישירים ולכן לא נצבעו. שימו לב, קיבלנו שגיאה שכאילו style לא קיים, והדפדפן דילג על ה-script. הסיבה היא שישנו רווח בין שני ה-scripts, והרווחים האלה, או ה-Enter שקיימים, הם מבחינת העץ גם כן אובייקטים. כשאין רווחים אין שגיאה, אבל זה לא פרקטי, כי הרבה פעמים יש ירידת שורה ורווחים, ולכן מתמודדים עם הבעיה על ידי בדיקה, שהצביעה תתבצע רק אם ה-Style של הרכיב שונה מ-Undefined, כלומר אם ה-Style קיים. אז אין שגיאה, וכל ארבע הפסקאות ושני הלינקים הפנימיים נצבעו בירוק.
11. מתי ניתן לגשת אל ה-DOM, סדר הטעינה: חשוב לציין משהו נוסף בנוגע לגישה מג'אווה סקריפט אל ה-DOM. הדפדפן עובר על מסמך ה-HTML שהגיע אליו מלמעלה למטה, ותוך כדי המעבר הוא בונה את העץ וגם קורא לג'אווה סקריפט שהוא נתקל בה בדרך, כלומר לג'אווה סקריפט שאינה נמצאת בתוך פונקציות. לדוגמה, אילו היינו לוקחים את הפקודה ושמים אותה ישירות בתוך ה-script ולא בתוך פונקציה, כשהדפדפן מגיע אליה הוא מריץ אותה, אבל היא נמצאת לפני שהוא הגיע וטען את כל המסמך. מורידים את ה-onLoad, מרעננים ורואים שנוצרת שגיאה, Object required, הדפדפן לא הצליח למצוא את האובייקט שאנו רוצים בכלל, ורק אחר כך הוא טוען את כל הדף.
12. שתי דרכים להריץ קוד שנוגע ב-DOM: רק עבור המקרים הספציפיים שבהם רוצים לקחת קטע קוד שירוץ בטעינת הדף ושהקטע הזה ייגש אל ה-DOM, כאשר ה-DOM עוד לא נבנה, יש שתי אפשרויות. האפשרות הראשונה היא לקרוא לפונקציה דרך אירוע onLoad, כמו שראינו קודם, והפונקציה הזאת היא זאת שתיגע באובייקטים של ה-DOM, מפני שאירוע ה-onLoad מתבצע אחרי שכל התגיות נטענו ואחרי שה-DOM נבנה עבורן. האפשרות השנייה היא לבנות את ה-script אחרי תגיות ה-HTML, כלומר בתוך ה-Body, אחרי הרכיבים שאליהם רוצים להגיע, ואז זה בסדר, כיוון שהרכיבים כבר נטענו ואפשר להריץ script שמתייחס אליהם. עדיף כמובן בהרבה להשתמש באירוע onLoad, כי זה יותר אסתטי, ויותר יפה שהסקריפטים נמצאים למעלה ב-head ולא זרוקים בתוך ה-body. מרעננים ורואים שאין שגיאה והצלחנו לבצע את מה שרצינו, כאשר קודם הדפדפן טען את כל הרכיבים, ואז כשהוא הגיע אל ה-script הוא הריץ אותו, אבל עכשיו הרכיבים כבר קיימים לו בזיכרון כעץ אובייקטים.
13. בניית דף ההדגמה AccessingDom: אנו בונים דף HTML חדש לגמרי שנקרא AccessingDom, עם טופס שבתוכו Div, פסקה, לינק שמצביע על גוגל, ומספר לחצנים שמאפשרים להגיע לכל מיני אובייקטים בתוך הדף שלנו. הלחצן הראשון עם אירוע onClick קורא לפונקציה שמאפשרת גישה ראשונה אל העץ. מעבר לגישות שראינו כבר, בואו נסגור קודם כל את מה שראינו, פונקציה שנקראת accessDom1, וניגשים בדיוק באותה צורה שניגשנו קודם, אל ה-document, אל ה-body, אל ה-first child, בתוכו first child, בתוכו last child, ואז ניגשים אל ה-Style, אל ה-BackgroundColor, ומכניסים לתוכו צהוב. לוחצים על הלחצן והצלחנו לשנות צהוב עבור הפסקה. זאת הייתה השיטה שראינו קודם, והיא השיטה הראשונה שאיננה פרקטית ויש לה רק חסרונות, למרות שהיא ניתנת לביצוע. ובואו נראה שיטות נוספות, כיוון שיש כמה שיטות שונות שבהן אפשר לגשת אל ה-DOM מתוך ג'אווה סקריפט, ולכל שיטה יש את היתרונות והחסרונות שלה.
14. שיטה שנייה, getElementById: בשביל לגשת לרכיב, מה שצריך לעשות הוא לתת לו ID. ה-ID הוא מזהה ייחודי של הרכיב באותו הדף, ואסור שיהיו שני רכיבים עם אותו ID. דרך ה-ID הזה אפשר להגיע אל הרכיב, ואז אין צורך לדעת איפה הוא נמצא בהיררכיה. הרבה יותר פשוט להגיע בצורה כזאת אל הרכיב, בלי קשר למיקומו, ואז גם אם בהמשך ישנו את מיקומו, עדיין ה-ID לא ישתנה וזה עדיין יעבוד. מגיעים שוב אל ה-Document, והערה שכפי שלמדנו כשלמדנו על Window, אנחנו לא חייבים לכתוב את המילה window ולכן אפשר פשוט לרשום document. יש לנו פונקציה שנקראת getElementById, שמקבלת כמחרוזת את ה-ID של הרכיב ומחזירה לנו את האובייקט מהעץ שמתאר בדיוק את הרכיב הזה, כלומר את התגית הזאת, ואז ניגשים אליו ישירות, בלי קשר למיקומו בעץ. שם אפשר כמובן להגיע גם אל ה-Style, אל ה-Color, ולהכניס לתוכו איזשהו צבע. לוחצים על הלחצן השני והלחצן השני שינה לנו את הצבע של אותה פסקה שניגשנו אליה ישירות.
15. שיטה שלישית, getElementsByName: הפונקציה הזאת היא ברבים, Elements, ולא Element ביחיד. כאשר נותנים ID לרכיב, אסור שעוד רכיב על הדף יקבל את אותו ID, ולכן כשניגשים על ידי getElementById ניגשים ישירות רק לרכיב האחד והיחיד שזה ה-ID שלו. אבל כשמתעסקים עם Name, יכול להיות שיש כמה רכיבים עם אותו השם. מהו בדיוק Name? זהו מאפיין נוסף, Attribute, שקיים עבור תגית, וראינו אותו ב-HTML, שמאפשר לשלוח מידע אל דף היעד, שמוגדר בטופס. אז מי שצריך שיהיה לו Name הם רק תגיות קלט, לדוגמה תיבת טקסט, קומבו בוקס וכו'. למה שיהיו שתי תיבות טקסט עם אותו Name? זה לא הגיוני, כיוון שה-Name מאפשר לשלוח את המידע אל השרת, או יותר נכון אל דף היעד שאמור להיות בשרת, ושם מזהים את המידע לפי ה-Name, ולכן גם כאן אינו הגיוני שיהיו שתי תגיות עם אותו Name. אז למעשה זה נכון, פרט למקרה של input type=radio. אם יש לנו רכיב שהוא רדיו באטן, יכולים להיות כמה רכיבי רדיו באטן שאנו רוצים שיהפכו לקבוצה אחת, וקבוצה כן מבצעים לפי ה-Name. לדוגמה, אם יש לנו rad-gender ואנחנו רוצים שיהיו לנו שתי תיבות רדיו באטן שמאפשרות להגדיר זכר או נקבה, כאן כן רוצים להפוך אותם לקבוצה, ולכן מגדירים אותם עם אותו Name. זה המקרה שבו יכולים להיות כמה רכיבי HTML שיש להם אותו Name, וזאת הסיבה שהפונקציה getElementsByName נחשבת לרבים, ה-S הזה, כיוון שהיא תביא לנו את כל הרכיבים שיש להם את אותו Name. שמים פה Label, יש לנו פה Male ויש לנו פה Female, ורוצים לקשר אותם גם לרכיבים האלה, ולכן מגדירים להם ID של rad-male ו-ID של rad-female, ותגית ה-Label מכילה מאפיין שנקרא For, שאפשר להגדיר לו עבור מי הוא שייך, את ה-male ואת ה-female, ובעצם זה אמור להיות כמובן בתוך ה-Label. וכעת, אם נבקש getElementsByName, נשלח את השם שאנחנו רוצים לקבל עבורו, שזה rad-gender, וקיבלנו בעצם מערך של כל השמות. אז אפשר עכשיו לרוץ על המערך הזה, לשים אותו במשתנה var radios, קיבלנו את כל הרדיו באטנים, ורצים על radios.length, ומגיעים אל radios במיקום i, ואז אפשר לגשת אל ה-Style. בהתחלה שינינו את ה-Color ולא ראינו כלום, כיוון שמה ששינינו הוא את צבע הגופן, ולרדיו באטן אין צבע גופן, אלא יש רק צבע רקע, ולכן הגדרנו Background Color ושינינו אותו ל-Red, לחצנו על הלחצן וצבע הרקע השתנה. הטקסט שאנו רואים כאן הוא עבור ה-Label, שמאפשר לנו לבחור אותם. אז השיטה הזאת מאפשרת לנו להגיע דרך הפונקציה getElementsByName אל רכיבים שזה ה-Name שלהם, וראינו שחוזר מערך, בגלל שיכול להיות מספר רכיבים עם אותו Name, וזה קורה רק במקרה של רדיו באטן.
16. שיטה רביעית, getElementsByTagName: הפונקציה הבאה בתור נקראת accessDom4, והיא מאפשרת לנו להגיע אל הרכיבים על ידי Tag Name. זאת אומרת, שבבת אחת אני יכול לקבל את כל התגיות שהתג שלהן הוא לדוגמה p. קוראים לזה paragraphs ורצים על כל ה-paragraphs, וכל פסקה משנים אותה לצבע ירוק. בונים לחצן שמאפשר לקרוא לפונקציה הזאת, לוחצים על הלחצן, ורצנו בבת אחת על כל התגיות שהן פסקאות. הצלחנו לקבל רק את הפסקאות, אבל כמובן שהוא מביא את כל התגיות שהן פסקאות על אותו הדף. בודקים מה קורה אם שולחים p קטנה ולא p גדולה, מרעננים, לוחצים על הלחצן, וזה גם עובד, זאת אומרת שזה לא case sensitive, אפשר לשלוח את שם התגית לא משנה איך.
17. שיטה חמישית, גישה דרך הטופס: האפשרות הבאה שלנו ניתנת לביצוע על ידי הטופס עצמו. מגדירים כאן פונקציה accessDom5, וכדי לבצע את זה צריך שבטופס עצמו, בתגית ה-form, יהיה לנו ID. קוראים ל-ID הזה my-form. כעת בונים כאן תיבת טקסט, type=text, ולתיבת הטקסט מגדירים גם שם, נקרא לה txt-first-name, וגם חייבים להגדיר לה Name, בשביל שהמידע יישלח אל השרת, למרות שאנחנו לא מתעסקים עם זה כרגע. אין בעיה שה-ID יהיה כמו השם, בתנאי שה-ID מופיע פעם אחת, ויש לנו פה תיבת טקסט. אז מגדירים פה איזשהו span, enter first name, יש פה ירידת שורה, ובונים כפתור חמישי כדי לקרוא לפונקציה הזאת, שהולכת להגיע אל ה-DOM בעזרת הטופס שלנו. איך עושים את זה? אנחנו בעצם יכולים להגיע אל האובייקטים שאנחנו רוצים על ידי פשוט מאוד שם הטופס, my-form, ואז נקודה, ואז ה-ID של הרכיבים שאנחנו רוצים. אנחנו רואים אותם גם ב-IntelliSense, וזה מתבצע בשימוש נפוץ ברכיבי קלט. פונים דרך הטופס, my-form, זה ה-ID שלי, רואים אותו פה את txt-first-name, שזה ה-ID של רכיב הקלט ששייך ישירות לתוך הטופס, ואז אפשר להגיע אל ה-Elements שנמצאים בתוכו, לדוגמה אל ה-Value שלו, ולהכניס לתוכו איזה ערכים שאנחנו רוצים, לדוגמה enter first name here. מרעננים, לוחצים על הלחצן, ורואים שהצלחנו להגיע אל הרכיב ב-DOM שמתאר את תיבת הטקסט, ואז שינינו את המאפיין Value שלו. בואו נשנה לו גם צבע, לוחצים על הלחצן, ואנחנו רואים שניגשנו בעזרת הטופס אל רכיב הקלט. זאת הייתה שיטה מספר 5.
18. שיטה שישית, שליחת this מהאירועים: שיטה מספר 6. בואו נניח שיש לנו כאן לחצן נוסף, accessDom6, ואני אקח אפילו עוד שני לחצנים. אני רוצה לצבוע את צבע הרקע של הלחצן כאשר אני נכנס אליו, ולשנות לו את הצבע בחזרה כשאני יוצא ממנו עם העכבר. איך עושים את זה? ראינו שצריך אירועים של onMouseOver ו-onMouseOut, ושני האירועים האלה צריכים לקרוא לפונקציות. בונים פונקציה פשוטה, אחת ויחידה, שתקבל את הצבע הדרוש, ונקרא לה accessDom6, אבל היא תקבל גם את ה-Control, או יותר נכון את ה-Object. נקרא לזה dom object, ואת ה-color. היא ניגשת אל dom object, style, background color, ומכניסה לתוכו את ה-color. כל מה שצריך לעשות זה לקרוא לפונקציה accessDom6 מתוך האירועים. חוזרים אל האירועים, הולכים אל האירוע onMouseOver, קוראים לפונקציה, ואני עכשיו צריך לשלוח לה שני דברים, לאיזה אובייקט אני רוצה לגשת. אבל למי אני רוצה לגשת? אני רוצה לגשת לעצמי, זאת אומרת ל-input type=button הזה שהוא אני. הייתי יכול לקבוע בפונקציה לגשת לאובייקט שהוא הלחצן הזה, ואז הפונקציה הזאת הייתה תקפה רק עבור האובייקט הזה, בדיוק כמו שכל אחת מהפונקציות האחרות הייתה תקפה לאובייקט ספציפי שהיא ניגשה אליו באחת הצורות. אבל אני רוצה לקרוא לה, וכל פעם לשלוח לה אובייקט אחר, ולכן מה שאני יכול לעשות זה לשלוח לה את המילה this. אם אני שולח את המילה this, בלי גרשיים כמובן, אומר ששלחתי את האובייקט מעץ ה-DOM שמתאר את התגית הנוכחית, שהיא זאת שהפעילה את האירוע, והתגית הנוכחית זה הלחצן הנוכחי הזה, input type=button. כמובן שצריך להעביר לה גם את הצבע הדרוש, לדוגמה red, ועבור הפונקציה השנייה, ליציאה, ניקח צבע רקע ריק, ואפשר לשכפל, וגם לרכיב הזה. כך אנחנו יכולים לראות שהפונקציה לא מתייחסת רק ללחצן אחד, אלא כל לחצן יכול להפעיל את הפונקציה ולהעביר את עצמו אליה, ולא חייב להיות רק לחצן, כל רכיב שאני רוצה אני יכול לשלוח בצורה כזאתי על ידי שליחת this. בואו נבדוק. אז כניסה ללחצן משנה אותו, יציאה מחזירה לצבע ריק. לחצן שני מחזיר לצבע ריק. יש לנו פה אפקט של כניסת עכבר ויציאת עכבר מרכיב, ואז אנחנו יכולים על אותה פונקציה, בעצם פונקציה אחת, לצבוע את כל הרכיבים שאנחנו רוצים. זאת בעצם הייתה שיטה מספר 6 לגשת לאובייקט מעץ ה-DOM, וכאן אנחנו שלחנו את האובייקט לפונקציה.
19. שיטה שביעית, event.srcElement ו-bubbling: שיטה מספר 7, accessDom7, וכאן אנחנו רק נקבל את הצבע בלבד. בואו נסתכל מתי אנחנו הולכים לקרוא לשיטה הזאת. נניח שיש לנו כאן מספר רב של רכיבים או תגיות. בואו נניח שיש לי טייבל שנמצאת במרכז, עם בורדר 1. יש לנו פה טייבל, טייבל רואו שמכילה טייבל דאטה. נניח שיש לנו פה שלושה תאים בכל שורה, ונשכפל את השורה הזאתי למספר רב של שורות. עכשיו אני רוצה שבכניסה לתא יצבע את התא, וביציאה מהתא יחזיר אותו לצבע הקודם. בואו נניח אני רוצה לצבוע אותו לאדום כשאני עובר עליו, וכשאני יוצא ממנו אני צריך להחזיר אותו לצבע הקודם. אז מה שקורה כאן זה שזה לא יהיה הגיוני לקחת את שתי הפקודות האלה, יותר נכון, ולשכפל אותם לכל אחד מהתאים. זה לא שזה לא יעבוד, בואו נראה שזה כן עבוד. שכפלתי את הדבר הזה על כל התאים, על שלושת התאים הראשונים יותר נכון, ניכנס אליהם ונראה שכל תא זה עובד עבורו. למה זה לא הגיוני? מפני שיש לנו פה המון המון המון תאים, ואנחנו לא רוצים שהדף שלנו ייטען סתם במידע שיעט את הגלישה אל הלקוח. מה גם שבהמשך אנחנו יכולים להוסיף עוד תאים, ולא נרצה לשכפל את זה. אז בואו נמחק את כל אלה ונגדיר אותם ברמת הטבלה. ברגע שאנחנו עושים את הדבר הזה, זה גם אמור לעבוד, למה? מפני שיש לנו משהו שנקרא Event Bubbling, שראינו ב-HTML, והוא אומר שברגע שאני זז מעל רכיב, אז האירוע שלו מבעבע כלפי מעלה. אם אני זז מעל תא, אז ביצעתי בעצם אירוע מסוים של תנועה, והאירוע הזה מבעבע אל ה-TR, ומבעבע אל ה-Table, סליחה. אם אני יוצא, אותו דבר, Mouse Out מבעבע מהאירוע למעלה, אל הטבלה, והוא ימשיך לבעבע גם אל ה-Div, וגם אל ה-Form, וגם אל ה-Body, עד שהוא יסתיים, או עד שהוא ייפסק, עד שאנחנו נפסיק אותו בצורה יזומה, וזה מתבצע בעצם עבור כל אירוע, גם אירועי קליק, תנועה, תחבר, יציאת תחבר, וכולי. לכן, אם אני העליתי את זה לכאן, אז ברגע שאני נכנס לתא, אז צבעתי את הטבלה עצמה. אבל מי זה this? this זה האובייקט שעבורו יש את התגית הנוכחית, זאת אומרת שזה הטייבל. אני לא רוצה שזה יהיה הטייבל, אני רוצה שזה יהיה התא שהעלה את האירוע. בואו נסתכל קודם כל איך זה מתנהג בצורה כזאת. אז אני נכנס לטבלה, וכבר אני רואה שכל הטבלה נצבעה לי בבת אחת, מפני ש-this זאת הטבלה עצמה, למרות שתא יכול להדליק את זה, עדיין כל הטבלה נצבעה. אז מה שנעשה, נקרא לפונקציה accessDom7, ונשלח רק את הצבע הדרוש. בואו נוריד את ה-this מהשיטה הזאת, ואני רוצה עכשיו להגיע אל האובייקט בעץ ה-DOM שהעלה את האירוע, בעצם שבגללו הפונקציה קרתה. אם אני אגיע אל האובייקט עצמו, אז האובייקט שהעלה את האירוע לא יהיה הטבלה, אלא יהיה התא, התא הספציפי בטבלה. איך אני מגיע אל האובייקט הזה שהעלה את האירוע? אני מגיע אליו על ידי event.srcElement, קיצור של Source Element. זה בעצם האובייקט בעץ ה-DOM שהעלה את האירוע האחרון שהתרחש. כאן אני יכול להגיע אל הסטיילינג שלו, ואז להכניס איתו את הצבע המבוקש. וכמובן אנחנו צריכים לשנות גם את הקריאה לפונקציה. accessDom7, ששכחתי לשנות, נבדוק שוב, נרפרש, וכרגע אנחנו רואים שזה מתבצע פחות או יותר בסדר, למרות שיש לנו טיפה אפקטים לא כל כך טובים, שכל הטבלה נצבעת. מה הסיבה שכל הטבלה עצמה נצבעת? הסיבה היא בגלל שאנחנו נכנסים גם לתחום שנחשב כטבלה, ולא כתא, זאת אומרת אל הבורדר שלה. בשביל למנוע את האפקט הלא רצוי הזה, אנחנו צריכים לבצע עוד דבר אחד בפונקציה, ולבדוק שה-srcElement, ה-tag name שלו, אכן שווה ל-td, ואז ביטלנו את האירוע הלא רצוי. אוקיי, אם אני רוצה לצבוע את כל השורה כאשר אני עולה על תא, אני יכול להגיע אל ה-event.srcElement, זהו האובייקט שהעלה את האירוע האחרון שקרה, ואני יודע שהוא אמור להיות td, מפני שבדקתי את זה שנייה לפני זה, אבל את מי שאני רוצה לצבוע בעצם זה את ה-parent node שלו. בואו נבדוק כעת. נרפרש ונראה שכל התא עצמו נצבע, וזה הרבה פעמים אפקט מאוד נפוץ באתרי אינטרנט, שג'אווה סקריפט צובעת לנו את כל השורה של טבלה בזמן שאנחנו עולים עליה.
20. innerHTML ו-outerHTML: ישנן שתי תכונות חשובות בנוגע לאובייקטים שנמצאים בעץ, והתכונות הן innerHTML ו-outerHTML. בואו נראה מה הכוונה. נניח שאני רוצה שבלחיצת סמלי על תא בטבלה, אני רוצה לראות באלרט את התוכן של התא. אבל מה זה התוכן של התא? תוכן של התא זה מידע שנמצא בין תגית הפתיחה לבין תגית הסגירה. המידע הזה נקרא innerHTML. בואו נסתכל רגע, ונוסיף אירוע נוסף שנקרא onClick, ברמת הטבלה, שכמובן יעלה כאשר ילחצו על תא בטבלה. אנחנו פשוט נקרא לפונקציה show inner html. נבנה אותה, נבדוק האם באמת מי שקרא לנו זה התא עצמו, ניגש אל event.srcElement, ואז ניגש אל ה-innerHTML שלו, ונציג את זה באלרט. בואו נבדוק. נעלה על תא, נלחץ עליו קליק אחד, ונראה את המידע שמוצג בו. לוחצים על התא של 111, לוחצים על התא של 333, המידע מוצג. זה היה innerHTML. מה זה outerHTML? outerHTML מציג לי את ה-HTML החיצוני והפנימי שלו. אם אני אסתכל על התג, אני אראה שזה ה-outer html. זאת אומרת שזה כל הרכיב, כל התגית ה-HTMLית, כולל התוכן שלו. בואו נריץ, נראה שקיבלנו את ה-TD עם המידע שנמצא בתוכו. כמובן שבשביל להציג את המידע, רצוי innerHTML, ואין לנו מה לעשות עם Outer HTML.
21. document.write וגישה ל-title: אפשרות נוספת שקיימת עבור ה-DOM, בואו נשים פה עוד לחצן, בטן, ואנחנו רוצים לבדוק פונקציה שנקראת write, document.write. בואו נבנה את הפונקציה הזאת. נעלה פה למעלה, יש לנו פה פונקציה, document.write. פונקציה שמאפשרת לנו לכתוב איזה טקסט שאנחנו רוצים. אבל שימו לב מה יקרה כשאני אריץ אותה. אני לוחץ על הלחצן, ופתאום כל המסמך שלי נעלם, ורק מה שכתבתי מופיע. בואו נסתכל על view source, נראה שכאילו ה-source של ה-HTML התחלף. הפונקציה הזאת נועדה יותר לצורכי דיבאגינג, מאשר באמת לעשות משהו, מפני שהיא פשוט מחקה לי את כל המסמך. יכלתי כמובן לכתוב HTML טהור, ירידת שורה. בואו נריץ, חוזר בחזרה, ונראה שהמידע הוא ממש HTML טהור שהדפדפן משתמש איתו. אבל שוב, הפונקציה הזאת היא יותר לצורכי דיבאגינג מאשר לצרכים אמיתיים, היא מוחקת לי את כל הדף. אנחנו יכולים דרך ה-document להגיע גם אל ה-title. בואו נבדוק. מרעננים ולוחצים על הלחצן, נסתכל כאן מה כתוב בטייטל פה למעלה, שכרגע אני רואה את Accessing Dom. לחיצה על הלחצן, ושינינו את זה ל-High. גם הטייטל כמובן היא חלק מה-DOM, וניגשנו אליה דרך ג'אווה סקריפט.
22. התיעוד של מיקרוסופט, DHTML Objects: עכשיו, אחרי שראינו איך אנחנו ניגשים לאובייקטים בעץ ה-DOM, אז כל מה שנשאר לנו לעשות זה לגשת אל האובייקט הרצוי באחת השיטות האלה שראינו, ולשנות איזה מאפיין שאנחנו רוצים בו. אבל איך אנחנו יודעים איך קוראים למאפיינים? ובשביל זה מיקרוסופט פרסמה טבלה מאוד חשובה, שמראה אילו תגיות ב-HTML קיימות, אילו אטריביוטס קיימים בתגיות האלה, ולמה הם מתורגמים מבחינת עץ ה-DOM עבור ה-Properties שלהם. בואו ניכנס לאתר של מיקרוסופט, מגדירים בתיבת החיפוש את המחרוזת DHTML Objects, ולוחצים על search. נכנסים אל הלינק הראשון, DHTML Object, כאשר DHTML זה Dynamic HTML, וזה אומר שינוי של HTML על ידי ג'אווה סקריפט ו/או CSS. בואו ניכנס, וקיבלנו רשימה ארוכה של כל התגיות שקיימות ב-HTML. אם אנחנו ניכנס לתגית מסוימת, בואו ניכנס לדוגמה ל-input type=text, יש לנו פה את כל התגיות, דוגמה, input type=text, נכנסים ללינק הזה ונראה את כל המידע הדרוש לגבי התגית הזאת. כאן אנחנו רואים אילו events יש לה, איזה תיאור קיים עבור כל event, ולאחר מכן אנחנו יכולים לראות אילו attributes קיימים לה, או יותר נכון methods, בתור התחלה. Method, פונקציות שקיימות עבור הרכיב, ולאחר מכן Properties, אילו properties קיימים לה. ואם אנחנו נכנסים אל ה-properties, אנחנו יכולים לקבל מידע נוסף בקשר לכל פרופרטי שקיים עבור התגית. לדוגמה, בואו ניכנס לפרופרטי value, שמתאר את הטקסט עצמו, ונקבל איך הפרופרטי הזה ב-HTML נקרא. אנחנו רואים שהוא נקרא value, וב-JavaScript איך הוא נקרא. אנחנו רואים שבמקרה הזה הוא ממש אותו השם. לא תמיד זה אותו השם, value במקרה זה הוא אותו השם, גם לאטריביוט ששייך ל-HTML, תגיד html, וגם הפרופרטי ששייך לאובייקט בג'אווה סקריפט. אז האתר הזה, או הלינק הזה, ממש מאפשר לנו להבין איך בג'אווה סקריפט אנחנו יכולים להגיע לכל פרופרטי, שבמציאות היה אטריביוט של HTML.
23. מניפולציות על ה-DOM עצמו: הדבר הבא שאנחנו הולכים לראות זה מניפולציה על ה-DOM עצמו. מה זאת אומרת? איך אנחנו יכולים להוסיף אל עץ האובייקטים אובייקט חדש שלא היה קיים קודם לכן, ואז אם אנחנו נעשה את זה, אז כמובן הדפדפן יציג אותו כאילו שזו תגית חדשה. ככה אנחנו יכולים בצורה דינמית, כאילו, לבנות תגיות של HTML. כמו כן, איך אנחנו יכולים לשנות מידע בתגית קיימת, את זה כבר עשינו, ואיך אנחנו יכולים למחוק רכיב מה-DOM. לצורך כך בואו נפתח טופס חדש, נסגור את הטופס הנוכחי, file, new, file, נבחר ב-html, וניתן לו שם Dom Manipulation.
24. יצירת אובייקט חדש, createElement: מגדירים כאן לחצן ראשון שיאפשר לנו לבצע יצירה, וב-onClick נרצה לקרוא לפונקציה, נקרא לה createDomObject. בואו נכתוב אותה. אנחנו רוצים שבקריאה לפונקציה הזאת ייווצר לנו אובייקט חדש בעץ ה-DOM, כאילו שהוא היה לפני זה, ואז הדפדפן אמור להציג את התגית שמייצגת את האובייקט הזה. לצורך כך בואו נגדיר משתנה שיחזיק את האובייקט. אנחנו הולכים ליצור דיו חדשה, ולכן נקרא למשתנה הזה divMessage, איזה שהיא דיו שתציג לנו הודעה. בשביל ליצור אובייקטים, או למחוק אובייקטים מה-DOM, יש לנו את ה-document, שמכיל כל מיני פונקציות לצורך יצירה של אובייקטים, הכנסת מאפיינים אליהם וכולי. לדוגמה, createElement. הפונקציה הזאת מקבלת איזה אלמנט אני רוצה לבנות, אנחנו רוצים לבנות דיו, ואז אני נותן לה div, והיא מחזירה לי אובייקט שעדיין הוא לא קשור ל-DOM, הוא פשוט אובייקט תלוי באוויר, אבל הוא מחזיק את כל המאפיינים שיש לדיו. עכשיו אני יכול לגשת אל האובייקט שלנו ולהגדיר לו את ההגדרות הרצויות. לדוגמה, אני רוצה להגדיר לו אטריביוט, בואו נגדיר לו style, שה-value שלו יהיה color green. ככה אני יכול להגדיר לאובייקט שלנו Attributes, כאילו שזו תגית html שאני עכשיו בונה אותה מחדש. בואו נגדיר ל-div message עוד Attribute, וניתן לה ID. ה-ID זה לצורך גישה לאחר מכן, לאטריביוט, או יותר נכון, לתגית עצמה. נקרא לה divMessage, קיצור של div message. אם אני רוצה להכניס טקסט, יש לנו את ה-innerHTML שמקודם ראינו. בואו נכניס לתוך הטקסט, ואחרי שעשיתי את כל ההגדרות, והגדרתי את כל הדברים הרצויים עבור הרכיב החדש, עכשיו אני רוצה לצרף אותו לעץ האובייקטים. בואו נצרף אותו קודם כל ל-body. בשביל לצרף אותו ל-body, נלך אל document.body, ואז אל appendChild, פונקציה שמקבלת את האובייקט החדש שבנינו ומוסיפה אותו אל הילדים שלו. עכשיו בואו נסתכל רגע, ה-body זאת התגית הזאת, כרגע יש לי ילד אחד עבור התגית, שהילד הזה זה בעצם תגית input. ה-appendChild תבצע הוספה של הדיב החדשה הזאת, בסוף הילדים של ה-body, זאת אומרת שהיא תוסיף אותו ממש כאן. בואו נבדוק את זה, נריץ, נלחץ על הלחצן, ונראה שבעצם התווספה לי דיב חדשה. אם היו לי כאן עוד ילדים, לדוגמה ירידת שורה, או הוריזונטל רואו וכולי, כשהייתי לוחץ על הלחצן, הוא היה מוסיף לי את זה בסוף הילדים, זה אומר כאן, ממש כתגית אחרונה.
25. הכנסה למקום ספציפי, insertBefore ו-appendChild לרכיב: שיטה נוספת, זה בעצם להגיד לו בצורה יותר ספציפית איפה אני רוצה את ה-child הזה. לדוגמה, בואו ניקח עוד hr, ניתן ל-hr, בואו נניח הזאתי, נקרא לה first row. ניגשים אל document, נלך אל body, וניגשים אל insertBefore, ואנחנו רוצים להגדיר אותה לפני תגית מסוימת. אנחנו רוצים לחפש את התגית, או יותר נכון, לקחת את divMessage, ולהכניס אותה לפני firstChild. בעצם מה עשינו פה? לקחנו את ה-div, והכנסנו אותה לפני ה-firstChild של ה-body, רק בשביל להדגים מה זה אומר הפונקציה הזאת. אז מי ה-firstChild של ה-body? ה-firstChild של ה-body זה ה-button הזה. זאת אומרת שאם אני מגדיר אותה כ-firstChild, לפני הפלסצ'יילד יותר נכון, אז כמובן הוא יופיע לי ראשון. בואו נבדוק, מרעננים, וקיבלנו את הדיו החדשה כתגית ראשונה. איך אנחנו יכולים להכניס אותה בין שני הקווים? בואו נגדיר כאן את ה-ID כ-second row, ונשכפל כעת את השורה הזאת, כך שנכניס insertBefore, document.getElementById, ונקרא ל-second row. קיבלנו כאן את ה-second row, את האובייקט שמתאר את ההוריזונטל רואו השני. אנחנו מכניסים את הדיו שלנו לפניו, זאת אומרת שהוא יהיה בין שני הקווים. בואו נרפרש, נלחץ על הלחצן, וקיבלנו אותו איפה שרצינו. אפשרות נוספת, זה פשוט לאתר בצורה אחרת את האובייקט שלנו, ולהכניס אותו בתוכו. מה זה אומר? בואו נניח שיש לנו כאן טבלה, בורדר 1, בתוך הטבלה יש לנו שורה, בתוך השורה יש לנו תא, ובואו נניח שלתא יש ID myCell. אנחנו יכולים לאתר בדיוק את הרכיב הזה, document.getElementByID של myCell, ואז להשתמש בפונקציה appendChild לגביו, ולשלוח את divMessage, כך שהיא תתבצע, ותכניס את ה-divMessage שלנו לתוך ה-myCell. בואו נבדוק מה קורה כרגע. מרעננים, יש לנו פה את הטבלה, שכרגע היא ריקה לגמרי, והכנסנו את הדיו ישירות בתוך הטבלה שלנו. זאת אומרת שה-appendChild מאפשרת לנו למצוא רכיב, ולהכניס את הרכיב החדש שלנו בתוכו, כ-child ראשון שלו. insertBefore מאפשרת להכניס לפניו, וכמובן שאנחנו יכולים להשתמש בכל פונקציה אחרת, שמאפשרת להרכיב, או להכניס, את הרכיב שלנו, לכל אחד ממקומות העץ. אז הפונקציה הזאתי יצרה לנו אובייקט חדש ב-DOM.
26. שינוי אובייקט קיים ב-DOM: בואו נלך עכשיו ונכתוב פונקציה נוספת שתשנה אותו. נקרא לה ChangeDomObject. לצורך כך נבנה פונקציה חדשה, ChangeDomObject, שמה שהפונקציה הזאת תעשה, תשנה מאפיינים בתגית שכבר יצרנו. אז בואו נפתח בפונקציה אובייקט, נקרא לו DivMessage. אין לו קשר עם האובייקט הקודם, כי כל אחד הוא לוקאלי, אבל אני רוצה לקבל את הרכיב החדש שהתווסף, ולכן אני אשתמש ב-document.getElementById, ואני אגיע אל ה-ID של האובייקט החדש. עכשיו שימו לב, שה-ID זה ה-ID הזה שנתתי לו כאן. בואו נעתיק, נדביק, ונבדוק רק שהדבר הזה לא null, רק אם הוא שונה מ-null, אני יודע שבאמת יש לי שם אובייקט אמיתי שהתקבל. אם לא נמצא אובייקט כזה, הפונקציה getElementByID מחזירה לי null. אז מה שאני רוצה לעשות, אני רוצה לגשת אליו, ולשנות לו את ה-className שלו. כלומר, לשלוט על ה-CSS. ככה אנחנו יכולים לראות איך אני שולט על ה-CSS בבת אחת דרך ג'אווה סקריפט. ובואו נניח שאני מגדיר איזושהי קלאס חדשה, שתכף אנחנו ניצור, שנקרא לה shownMessage. אוקיי, בואו נבנה את הקלאס הזאת, בתגית style. אז יש לנו את ה-shownMessage, ונגדיר בתוכה position absolute, כיוון שאנחנו הולכים לחשב אותו על ידי ג'אווה סקריפט. border, solid, שני פיקסלים, red. בנוסף יש לנו פונט, weight, נקרא לזה bold, ו-font, size, extra extra large. אז יש לנו איזשהו סטיילינג כזה, יותר נכון קלאס, שאנחנו נותנים בצורה דינמית לאובייקט של ה-DOM. אחרי שנתנו לו את הקלאס הזה, והוא קיבל מימדים, אז אנחנו יכולים להגדיר בדיוק איפה אנחנו רוצים למקם אותו. לדוגמה, divMessage.style.left, ובואו נחשב איפה בדיוק אנחנו רוצים לשים אותו. אז אנחנו רוצים לשים אותו במרכז המסך, בצורה דינמית. document.body.clientWidth מאפשר לי לקבל את כל הרוחב של המסך, לחלק לשתיים, ונפחית ממנו את divMessage.clientWidth ונחלק לשתיים. וזה בעצם יציב לנו אותו באמצע המסך בדיוק. בואו ניתן לו עוד איזה סטיילינג נוסף, ו-200 פיקסלים, אוקיי. בואו נראה אם יש לנו לחצן, יש לנו לחצן שקורא לפונקציה Change. נרפרש, ניצור את האובייקט. בואו נראה רגע מה קורה עם הפונקציה, כן, עלינו גם לשנות את שם הפונקציה הזאת ל-Change. שוב נבדוק, נלחץ על הלחצן, יצרנו את האובייקט. אוקיי. אז ברגע שאני לוחץ, אני רואה את האובייקט נוצר לי כאן, ו-Change אמור לשנות אותו אל מרכז המסך, כאשר יש לנו פה איזה שגיאה. בואו נראה למה הוא כועס עלינו, וממבט מהיר ניתן לראות שהנקודה פסיק הזאת מיותרת. אוקיי, בואו נבדוק את זה שוב, אז יש לנו את האובייקט שנוצר, ואנחנו רואים שהבאנו אותו לאן שרצינו. זאת אומרת שינינו בו מאפיינים. אם אני מרפרש, ולוחץ על change dome, כאשר אובייקט לא קיים, כמובן שאני מקבל null, ואני מתעלם ממנו לחלוטין. אוקיי, בואו נחזור ונראה אפילו את הפונקציה הזאת. ה-appendChild של ה-body, במקום להכניס אותו לתוך הטבלה, כאן הוא נמצא בסוף ה-body שלנו, והבאנו אותו לאן שרצינו. אז הפונקציה הזאת אפשרה לנו לשנות מאפיינים באובייקט קיים ב-DOM, אחרי שצירפנו את האובייקט אל ה-DOM, הוא כמובן היה קיים שם, ואנחנו יכלנו לשנות את המאפיינים.
27. הסרת אובייקט מה-DOM, removeChild: הדבר הבא שאנחנו הולכים לראות זה remove, איך אנחנו מסירים DOM Object. אוקיי, בואו נבנה את הפונקציה removeDomObject. ראשית, שוב פעם, נקבל את האובייקט הזה, וגם כאן נבדוק האם באמת יש לנו אובייקט כזה, או אין לנו אובייקט כזה. במידה וקיים לנו אובייקט divMessage, שונה מ-null, מה שאנחנו רוצים לעשות זה לגשת אל document.body, וכאן חייבים לגשת בדיוק אל התגית שבתוכה נמצא האובייקט שלנו. כאן אנחנו רואים שקראנו ל-document.body, הפן צ'יילד, ולכן הדיו החדשה נמצאת בתוך ה-body. ואני צריך לגשת אל document.body, removeChild, ולשלוח לה את ה-divMessage, היא תאתר אותו ותמחוק אותו. בואו נבדוק, מרעננים, ניצור אובייקט, נשנה אותו, נמחוק אותו. בואו נרפרש, אם אני לוחץ על remove, לא קורה כלום, כי עדיין הרכיב לא קיים לנו. אם אני לוחץ על יצירת אובייקט, ומיד מחיקה, הוא כמובן גם כן נמחק, כי הוא בתוך ה-body. change, remove, במידה והאובייקט שלנו היה לדוגמה בתוך התא הזה בטבלה, בשביל למחוק אותו, לא הייתי יכול לעשות את זה מה-body. בואו נראה מה יקרה עכשיו אם אנחנו נריץ. אני עוצר את האובייקט, הוא שייך כרגע לטבלה, ואז אני מנסה למחוק אותו, והמערכת אומרת לי, לא מצאתי איזה אובייקט אתה רוצה. ל-body אין ישירות את האובייקט הזה. אוקיי, אז אם הייתי רוצה למחוק אותו ממקום אחר, שהוא קיים בו, הייתי חייב לגשת, ולאתר אותו. document.getElementById, לאתר בדיוק את ה-parent שלו, myCell, ואז לקרוא ל-removeChild, ולשלוח את ה-divMessage שלנו. בואו נבדוק. כעת, כשאני מצרף אותו, הוא מתווסף לנו לתוך ה-Tab, הטבלה. remove עכשיו אמורה לעבוד, ואכן מוחקת אותו מה-Tab. בואו ננסה לשנות ולמחוק, וגם כאן הוא נמחק.
28. סיכום כללי של הנושא: ובעצם מה שראינו כרגע זה את כל הנושא של ה-DOM, Document Object Model. איך ג'אווה סקריפט מתרגמת את דף ה-HTML לעץ אובייקטים, איך אנחנו יכולים לראות את עץ האובייקטים דרך הדפדפן, על ידי Developer Tools, ולחקור ולראות מה יש בתוכו. אנחנו יכולים דרך Developer Tools, אפילו למצוא רכיב, על ידי בחירתו כאן למעלה, על ידי החץ הזה. אני יכול לסמן את הרכיב הרצוי, לדוגמה את הלחצן, ומיד הוא מסמן לי ב-DOM איפה הוא נמצא בהיררכיה, ואני רואה כאן שהגעתי ישירות אל ה-input שמתאר לי את הלחצן הזה. לאחר מכן ראינו איך אנחנו יכולים לגשת לכל מיני רכיבים ב-DOM, דרך מספר שיטות של גישה לאובייקטים ב-DOM. ראינו שבע שיטות שונות לגשת לאובייקט ב-DOM, ואז ראינו איך אנחנו יכולים לשנות פרמטרים באובייקטים האלה, ואז איך אנחנו יכולים ליצור אובייקטים חדשים, לשנות אותם, או אובייקטים קיימים, וגם להסיר אותם לגמרי מה-DOM. וזה נותן לנו שליטה על בנייה דינמית של דף ה-HTML, דרך ג'אווה סקריפט. אז זה בעצם היה ה-DOM, שזה אחד הנושאים החשובים, שבהמשך אנחנו הולכים להשתמש איתו שוב ושוב, בשביל להדגים כל מיני יכולות של ג'אווה סקריפט.
סיכמנו את נושא ה-DOM המלא, מהפיכת דף ה-HTML לעץ אובייקטים בזיכרון הדפדפן, יחסי ההורה, הילד והאחים, שבע שיטות גישה לאובייקטים, innerHTML ו-outerHTML, event bubbling ו-event.srcElement, התיעוד של מיקרוסופט, ועד ליצירה, שינוי ומחיקה דינמית של אובייקטים בעץ. זה הכל, תודה רבה.
בשיעור הבא נעסוק בנושא RegEx in JavaScript.
SR611HE
