שיעור ארבעה עשר- DOM לעומק

פרק 14 - DOM לעומק

הקדמה

אוקי.. אנחנו כבר מתחילים ממש להתקדם. אנו רוצים בשלב זה, שנחזור לגעת במשהו שכבר למדנו בפרק 11, אבל הפעם לקבל הבנה קצת יותר עמוקה יותר, כדי שממש בקרוב, נוכל כבר ליצור משחק שלם, ולא קטעי קוד קצרים כל פעם.

הדבר הזה הוא הDOM.

בפרק 12, דיברנו על הDOM כאל ׳מתאם׳. מתאם בין קוד ג׳אווהסקריפט לדף הhtml.

אמרנו שבעזרת הDOM נוכל ׳להתחבר׳ מקוד הג׳אווהסקרפיט לאלמנטים מדף הhtml. (לדוגמא בעזרת getElementById).

עכשיו נרצה להתעקב בנושא זה עוד קצת ולהבין קצת יותר לעומק איך זה באמת פועל.

כמו שהזכרנו בפרקים הראשונים, דף הhtml בנוי מהרבה אלמנטים שאותם אנו יוצרים בעזרת התגיות. בואו נראה את הדוגמא הכי פשוטה אולי לדף html:

דיברנו על כך שהתגיות הם בנויות אחד בתוך השני, וראינו מספר דוגמאות, למשל יצרנו div, שיש בתוכו אלמנטים אחרים.

אפשר להתייחס אל הדף html כמו לטבלת יוחסין, אשר בראש האילן למעלה, יש את האבא, לאבא יש בנים, לבנים האלה יש בנים וכו׳.

אז בואו נראה איך תראה טבלת היוחסין שלנו בציור:

כמו שאנו רואים בקוד שהתגית html עוטפת את כולם, לאחר מכן יש את body וhead שנמצאים תחתיו, תחת הbody יש כותרת אחת שכתוב בה hello world! , ותחת הhead, הגדרנו את השם של הדף.

כעת, לצורך העניין נרצה להוסיף לדף div שבתוכו יש פסקה. בלי לכתוב את הקוד עבור זה, נסו להבין איפה הdiv ייכנס בתוך האילן יוחסין הזה? בן של מי הוא יהיה? אבא של מי הוא יהיה? אילן היוחסין שלנו יראה כך:

מקווה שעד כאן הכל מובן ברור.

אנחנו רואים שבאילן, כל תגית/אלמנט מקבל ריבוע משלו. כמו אילן יוחסין אמיתי, שכל ריבוע מייצג בנאדם אמיתי.

כעת יהיה יותר ברור אם נתייחס לDOM שלנו בתור אילן יוחסין (זה עדיין לא ההגדרה המדוייקת ביותר, אבל זה כבר התקדמות ממה שלמדנו).

התרגום של DOM זה Document object model.

התרגום של Document בעברית זה מסמך.

נרצה לומר את המשפט הבא:

הDOM הוא סוג של מסמך שהוא בעצם ה׳אילן יוחסין׳ של הקוד html שלנו.

כשאמרנו בעבר שבעזרת הDOM אפשר להתחבר מקוד הג׳אווהסקריפט לhtml, עכשיו זה יהיה קצת יותר מובן. ׳ההתחברות׳ היא לגשת ל׳מסמך׳ הזה ולמצוא שם את האלמנט שרצינו.

לאחר שמצאנו אותו, אנחנו יכולים לשמור אותו בתוך משתנה ואז לעבוד עליו כרצוננו.

נראה דוגמא פשוטה:

קודם כל אנו רואים div שיש בתוכו כותרת.

נסתכל בקוד ג׳אווהסקריפט בשורה הראשונה.

לאחר שהגדרנו משתנה, המילה הראשונה היא document ורק אז אחרי הנקודה יש getElementById.

עכשיו שאנחנו מבינים קצת יותר מה זה הDOM, נוכל להבין את זה באופן הבא:
אנו אומרים למחשב: ״לך לDOM, ובעזרת הפונקציה getElementById תחפש לנו את האלמנט המסוים שיש לו את התעודת זהות המסוימת שהכנסנו בתוך הסוגריים.

המחשב יחפש בDOM את האלמנט עם התעודת זהות שביקשנו, ואם הוא ימצא הוא ׳יחזיר׳ את האלמנט חזרה בתוך המשתנה mydiv שהגדרנו. בשלב הזה, ברגע שאנחנו ששמרנו את האלמנט מהDOM, נוכל לבצע עליו פעולות, כמו החלפת התכונות שלו/בדיקה מהם ועוד..

סיכום

אז למדנו שהDOM הוא בעצם סוג של מסמך מיוחד שמייצג את הדף שלנו. כלומר הוא מייצג בתוכו בצורה של אילן יוחסין את כל האלמנטים שנמצאים בתוך הדף.

בעזרתו נוכל לבצע פעולות על הדף דרך הג׳אווהסקריפט:

לגשת לאלמנטים, להכניס אלמנטים חדשים וכו׳.

פרק הבא – נתחיל לראות שימושים בעזרת הDOM.

פרק 14 - DOM לעומק

כל הזכויות שמורות לבנימין טק

אבל עזבו זכויות, אנחנו בעיקר מרגישים מחוייבות לעודד פה בבנימין חדשנות ויזמות בראש קהילתי נעים ומזמין :)

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)