ה- Document Object Model (DOM) מגדיר שיטת גישה לתגיות HTML שבדף אינטרנט, למאפיינים שלהם, למלל ולהגדרות העיצוב. בעזרת שיטה זו ניתן לגשת אליהם, לקרוא אותם ואף לשנות אותם.

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

• document
• HTML tag
• HTML tag's parameter
• HTML tag's text

פניה לצומת

ישנן שלוש דרכים שונות בהן ניתן לפנות לצומת כלשהי בדף ואלו הן:

1. בעזרת הפניה

getElementById()

2. בעזרת הפניה

getElementsByTagNames()

3. בעזרת שיטוט בעץ הצמתים תוך שימוש בפניות

childNodes[], parentNode, firstChild ו- lastChild

בעזרת השיטה הראשונה קל ונוח לפנות לתגית HTML במסמך. הפניה תתבצע בצורה הבאה:

document.getElementById("element_id_name");

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

document.getElementById("element_id_name").firstChild;

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

קריאת נתוני צומת

מרגע שפנינו לצומת במסמך ניתן –

1. לקרוא את שמה בעזרת הפניה nodeName. זהו שם תגית ה- HTML.
2. לקרוא את סוגה בעזרת הפניה nodeType. השלושה הנפוצים הם: תגית HTML, מאפיין של תגית או קטע מלל.
3. לקרוא את ערכה בעזרת הפניה nodeValue. במקרה של מאפיין נקבל את ערכו ובמקרה של קטע מלל נקבל את המלל עצמו.

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

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

שינוי ערכי צומת

שם הצומת וסוגה ניתנים לקריאה בלבד. אך את הערך של הצומת (nodeValue) ניתן גם לשנות. להלן דוגמה המשנה את מלל הכותרת של התגית h1.

המלל התחום בתגית מהווה כאמור צומת-ילד של צומת התגית עצמה. ניתן לשנות את המלל התחום בתוך תגית בדרך קצרה יותר. שימוש בפניה innerHTML תפנה ישירות למלל של התגית. להלן שוב הדוגמה הנ"ל, הפעם תוך שימוש בקריאה innerHTML.

ניתן גם לשנות את עיצוב התגית. בעזרת הפניה style נוכל לגשת להגדרות העיצוב של תגית ה- HTML אותן הכרנו בפרק של עיצוב בעזרת CSS. בדוגמה הבאה, למשל, נשנה את צבע הגופן של הכותרת h1 משחור (צבע ברירת מחדל) לירוק.

הערה: בדוגמאות בפרק זה קוד ה- JavaScript נשתל בתוך גוף הדף (בתחום התגית body). צורת כתיבה זו נעשתה כאן לשם הנוחות בלבד של הבנת הדוגמאות. נזכיר את הנאמר כבר בפרק של JavaScript כי צורת כתיבה זו אינה יעילה ואינה מומלצת. קטעי קוד אלו מומלץ לכתוב כפונקציות בקובץ נפרד בעל סיומת js.

כעת נוכל לגשת וללמוד כיצד ניתן לעצב אתר דינאמי ואינטראקטיבי עם המשתמש בעזרת DHTML !

ב ה צ ל ח ה

בחזרה למעלה