Get Adobe Flash player
דף הבית HTML DOM עץ אלמנטים

HTML DOM

בטרם נלמד כיצד מתפעלת ג'אווה סקריפט את ה HTML, כדאי שנדבר מעט על HTML-DOM

DOM (ראשי תיבות של Document Object Model), הינו סטנדרט שנקבע ע"י W3C (הקונצרוסיום העולמי של האינטרנט) לגישה אל דף HTML או XML ע"י שפות תכנות אחרות.

ה- DOM מגדיר את האובייקטים והמאפיינים של העצמים במסמך (Document) ואת ה"מתודות" (שיטות) גישה אליהם ובמילים אחרות:

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

HTML-DOM היא דרך להצגת דף HTML במונחים של אלמנטים בעלי תכונות ומתודות. גישה זו מניחה בסיס לממשק אל שפות OOP (תכנות מונחה עצמים) שהג'אווה סקריפט היא אחת מהן.

צמתים בדף HTML

על פי הגדרות DOM, מרכיבי מסמך HTML הוא צמתים (node) הכוללים מידע. הדף (המסמך) כולו למשל, הוא צומת. כל תג, על תכונותיו והטקסט המקושר אליו, הוא צומת. אפילו הערות הנכתבות בדף - הן צומת.

התבונן בדוגמת הקוד הבאה:

<html>
 <head>
    <title> ג'אווה סקריפט </title>
 </head>
 <body>
    <h1>שעור DOM</h1>
    <p>סטודנטים הלומדים HTML </p>
 </body>
</html>

הצומת הראשונית (השורש) היא העצם <html> כל שאר הצמתים כלולים בתוכו.

לצומת זו, יש שני "בנים":<head> ו <body>

לצומת <head> יש בן אחד <title>, ולצומת <body> שניים: <h1> ו- <p>.

ומה באשר לטקסט?

לכאורה, הגיוני לחשוב שהטקסט "ג'אווה סקריפט" הכתוב בתוך ה <title> הינו תכולתו של האלמנט.

אך לא כך הוא. DOM מגדירה את הטקסט באופן שונה. הטקסט הינו צומת שיש לו ערך. הצומת <title> שבודגמא, מכיל בתוכו צומת טקסט שהערך שלו הוא "ג'אווה סקריפט".

עץ האלמנטים של HTML DOM

HTML DOM רואה את דף ה HTML כתרשים זרימה הנקרא עץ הצמתים (Node Tree). כל האלמנוים (העצמים) שבעץ נגישים דרכו, ואפשר אף לשנות, למחוק וליצור אלמנטים חדשים. 

עץ הצמתים בציור הבא מראה סט אלמנטים ואת החיבורים שביניהם. העץ מתחיל בעצם השורש (האב) ושולח ענפים כלפי מטה עד לאלמנטי הטקסט שבתחתיתו:

 

האלמנטים השונים מקיימים יחסים היררכיים בינם לבין עצמם, ומקובל לקרוא להם במונחים: אב, בן, אחאי (parent, child, sibling).

קשרים שבין האלמנטים

התבונן בקוד הבא:

 

<html>
 <head>
    <title> ג'אווה סקריפט </title>
 </head>
 <body>
    <h1>שעור DOM</h1>
    <p>סטודנטים הלומדים HTML </p>
 </body>
</html>

מתוך ה HTML הזה ניתן להבין:

  • לצומת <html> אין אב. זהו צומת השורש
  • צומת האב של ה <head> וה- <body> הוא ה- <html>
  • האב של הצומת "סטודנטים הלומדים HTML" הוא הצומת <p>

וגם:

  • לצומת <html> יש שני בנים: <head> ו- <body>
  • לצומת <head> יש בן אחד: <title>
  • לצומת <title> יש בן אחד: צומת הטקסט שהערך (value) שלו הוא:"ג'אווה סקריפט"
  • הצמתים <h1> ו- <p> הם אחאים (siblings). שניהם בנים של הצומת <body>.

 

 

 

אל השיעור הקודם