Get Adobe Flash player
דף הבית HTML DOM מאפיינים ומתודות

תכנות HTML באמצעות DOM

כפי שראית בפרק הקודם, דף HTML בנוי מסט של צמתי אובייקטים. צמתים (nodes) אלה ניתנים לגישה ע"י שפת התכנות ג'אווה סקריפט (ותוכנות oop אחרות).

ממשק התכנות של ה DOM מוגדר ע"י מאפיינים ומתודות (שיטות פעולה) סטנדרטיים.

  • מאפיינים (Properties): מהותו של האובייקט - שם, ערך, תוכן, אובייקט אב או בן, תכונה (Attribute) וכו'
  • מתודה: פעולה שמתבצעת על האובייקט - מציאת אובייקט על פי ה id שלו, על פי שם התג ועוד

רשימה חלקית של מאפיני האובייקטים

ברשימה שלפניך, x מהווה את שם הצומת בעל המאפיינים

  • ערך הטקסט של x - x.innerHTML
  • מספר התווים של x - x.length
  • שם הצומת (האלמנט) x - x.nodeName
  • הערך של אלמנט x - x.nodeValue
  • שם אלמנט האב של x - x.parentNode
  • שם אלמנט הבן של x - x.childNodes
  • התכונה (attribute) של האלמנט x - x.attributes

הערה: המאפיין innerHTML לא שייך לתקן ה DOM של W3C אך נמצא בשימוש רוב הדפדפנים

 רשימה חלקית של מתודות האובייקטים

  • הבא את האלמנט בעל ID מוגדר - x.getElementById(id)
  • הבא את כל האלמנטים מאותו סוג תג - x.getElementsByTagName(name)
  • הוסף אלמנט בן לאלמנט x - x.appendChild(node)
  • מחק אלמנט בן מאלמנט x - x.removeChild(node)

דוגמאות לשימוש במאפיינים ובמתודות

א. מאפיין innerHTML ומתודת etElementById

מאפיין innerHTML הינו כלי נוח וקל לאחזור או עדכון טקסטים בתוך אלמנטים (כולל צמתי <html> ו <body>.

בדוגמא הבאה, נעשה שימוש במאפיין innerHTML לצורך הצגת הטקסט הכתוב בכותרת הנמצאת באלמנט H1:

<html>
 <head>
  <title>מאפיינים </title>
 </head>
 <body dir="rtl">
   <p id="koteret">דוגמא יפה לאחזור נתונים</p>
   <script type="text/javascript">
      txt=document.getElementById("koteret").innerHTML;
      document.write("<p>הטקסט הכתוב בפסקה הינו: '" + txt + "' ומספר התווים בשורה הוא " + txt.length + "</p>");
   </script>
 </body>
</html>

הסבר:

המשתנה txt מקבל באמצעות innerHTML את התוכן של האלמנט שה ID שלו הוא koteret. כמובן שתוכן זה הוא הטקסט בכתוב בתוך התג <p> שבחלק העליון.

את התוכן (הנמצא כאמור במאפיין innerHTML) השגנו ע"י המתודה getElementById(id).

לאחר מכן, ביצענו את המתודה write על האובייקט document שכהוא כאמור דף ה HTML עצמו אך הוספנו גם את המאפיין length שמציג על המסך את גם את מספר התווים הנמצאים במשתנה txt.

ב. המאפיינים childNodes ו- nodeValue יחד עם המתודה etElementById

<html>
 <head>
  <title>מאפיינים </title>
 </head>
 <body dir="rtl">
   <p id="koteret">דוגמא יפה לאחזור <br />נתונים</p>
   <script type="text/javascript">
      txt=document.getElementById("koteret").childNodes[2].nodeValue;
      document.write("<p>הטקסט הכתוב בפסקה הינו: " + txt + "</p>");
   </script>
 </body>
</html>

הסבר:

בדוגמא זו, גזרנו את הטקסט שבפסקה (ע"י הכנסת <br> לפני המילה נתונים) לשני אלמנטים.

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

מסלול הגישה אל האלמט הרלוונטי הוא זה: אובייקט document קורא לאלמנט שה ID שלו הוא koteret. באלמנט זה יש שלושה אלמנטים בנים: 'דוגמא יפה לאחזור', <br> ו- 'נתונים' כשהמאפיין childNodes[#] קורא לאלמנט המבוקש. כשזה מגיע, יודע המאפיין nodeValue לטעון את הערך שלו למשתנה txt.

document > getElementById(id) > chilNodes[#] > nodeValue

הערך childNodes[0] יחזיר את  הקטע הראשון של המחרוזת: 'דוגמא יפה לאחזור'. הערך [1] יחזיר null - כי <br> אינו ערך של האלמנט. המילה 'נתונים' תופיע כשהערך יהיה [2].

ג. מאפיין nodeName

אם תחליף בדוגמא הקודמת את המאפיין nodeValue ב- nodeName, תחלץ מתוך ה childNodes[#] את שם האלמנט ולא את תוכנו. הערכים [0], [2] יציגו #txt (אלמנט טקסט) והערך [1] יציג את BR.

ד. דוגמא לשילוב מאפיינים ומתודות שונות:

<html>
 <head>
  <title>מאפיינים </title>
 </head>
 <body dir="rtl">
    <h1>שורת כותרת</h1>
    <div  id="koteret" style="color:#000088">
      <p>שורה מספר 1</p>
      <p>שורה מספר 2</p>
      <div id="koteret2">שורה ללא מספר></div>  
      <p>שורה מספר 3</p>
      <p>שורה מספר 4</p>
    </div>
   <script type="text/javascript">
      x=0;
      for(x=1;x<=2;x++)
      {
      txt=document.getElementById("koteret").getElementsByTagName("p");
      document.write("<p>הטקסט הכתוב בפסקה הינו: " + txt[x].innerHTML + "</p>");
      }
   </script>
 </body>
</html>

הסבר:

הקוד שלמעלה, יודע לזהות באמצעות getElementById את כל האלמנטים בנים של האלמנט המזוהה ע"י ID="koteret", ובתוכם את אלה שהתג שלהם הוא <p> ואז להציג רק את "שורה מספר 2" ו-"שורה מספר 3". שימו לב שהתוצאה מתעלמת מהכותרת H1 ומה div שה id שלו שונה ממה שהקוד מחפש.


 

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