שיעור חמישה עשר- שימושי הDOM

פרק 15 - שימושי הDOM

נזכיר שבפרק הקודם ירדנו טיפה לעומק של הDOM.

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

ראינו כבר איך משתמשים ב()getElementById.

כעת ניגע בעוד 2 דברים:

שינוי התוכן של אלמנט קיים.
יצירת אלמנטים חדשים.

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

שינוי התוכן של אלמנט קיים

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

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

אנחנו נשנה את התוכן בעזרת התכונה: innerHTML.

innerHTML – בעצם מייצג את מה שכתוב בין התגיות.

בואו נראה דוגמא.

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

כמו שאתם רואים, בhtml יצרנו div ריק.

כעת בעזרת innerHTML, אני מכניס את מה שכתוב בין הגרשיים שיהיה כתוב בין התגיות של הdiv.

בעצם לאחר השינוי שעשינו, האלמנט מיוצג כך:

כלומר, יודפס בתוך הdiv הכותרת !Hello World.

יצירת אלמנטים חדשים

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

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

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

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

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

בשביל ליצור אלמנטים חדשים יש 3 שלבים שצריך לבצע:

יצירת האלמנט
הכנסת תוכן לתוך האלמנט
הכנסת האלמנט לתוך הדף

יצירת האלמנט: בשביל ליצור את האלמנט אנו נשתמש בפונקציה של ()createElement.

הכנסת תוכן לתוך האלמנט: לפי הצורך שלנו.

הכנסת האלמנט לתוך הדף html: בעזרת ()appendChild – נרחיב בהמשך.

דוגמא:

שלב 1:

כמו שאמרנו, בשביל ליצור את האלמנט, אנו נשתמש בפונקציה createElement.

אז אנו רואים שב createElement בתוך הסוגריים אנחנו כותבים את הסוג אלמנט שאנחנו רוצים. אם היינו רוצים פסקה היינו מכניסים "p", וכן הלאה.

*שימו לב שגם createElement הוא גם בה אחרי document, כלומר יצרנו אלמנט חדש שיהיה חלק מהDOM.

לכן נעבור לשלב 2 – הכנסת תוכן לאלמנט:

איך מכניסים תוכן כבר ראינו קודם. עושים זאת בעזרת innerHTML.

נראה דוגמא:

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

נעבור לשלב 3 – הגדרה איפה האלמנט נכנס בתוך הDOM.

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

זכרו הDOM הוא כמו אילן יוחסין:

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

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

נראה דוגמא:

פה בחרנו להכניס את הdiv תחת הbody, אז ראשית נגשנו לbody, ולאחר מכן קראנו לappendChild שהכניס את הdiv תחתיו.

באותו אופן אם היינו רוצים להכניס אותו כבר של אלמנט אחר – אז היינו מפעילים את הפונקציה על אותו אלמנט.

בואו נראה עוד דוגמא עם אותו רעיון אך טיפה שונה, שתעזור להפנים את הדברים:

מה ההבדל הפעם?

משימה:

קחו את התוכנית שכתבתם שהמליצה על שמות, ותשנו אותה, כך שבמקום שהשם יודפס לקונסול – הוא יודפס בתוך הדף. יכולים להשתמש בפסקה, ובinnerHTML על מנת להכניס את זה. מוזמנים גם להוסיף כפתור, או כל דבר אחר שיעזור לתוכנית להיות יותר יצירתית.
כתבו תוכנית, שתספק למשתמש רשימה של שירים לפי ההעדפות שלו.. השתמשו בכל הכלים שלמדנו עד כאן. (מערכים עבור השירים, פונקציה שמקבלת את ההעדפות של המשתמש – שנת הוצאה, סגנון, שפה וכו׳, הופסת כפתור, הדפסה לדף בעזרת פסקה וכו׳)
בג׳אווהסקריפט תצרו כותרת ופסקה, תכניסו לתוכם ערכים, ותכניסו אותם לתוך הדף.
תשנו את מה שבצעתם במשימה 2, באופן שכל שיר שיופיע על הדף יהיה בתוך אלמנט משלו. לדוגמא, כל פעם שאתם קוראים שיר מהמערך – תצרו פסקה, תכניסו לתוכה את השם של השיר, תתנו צבע מיוחד לשיר, ותכניסו לדף.

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

סיכום

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

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

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

פרק הבא – style

פרק 15 - שימושי הDOM

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

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

שלחו פרטים

שלחו פרטים

שלחו פרטים

שאלה מעולה :)