DOM או Document Object Model הוא למעשה API (ממשק תכנות יישומים) אשר מגדיר את המבנה הלוגי של מסמכי HTML ו-XML ואת דרך הגישה אליהם.
את ה-DOM נוכל לתאר מבחינה לוגית כעץ – או יותר נכון אוסף של עצים שמסמלים לנו את המבנה הלוגי של מסמך ה-HTML שלנו.
כלומר שה-DOM מספק לנו את הגישה שאנו צריכים כדי לגשת לרכיבי HTML דרך קוד JavaScript.
נוכל לבאר זאת באמצעות תרשים זרימה:
כפי שתוכלו להבחין, מודל המסמך (document) הוא אחד מהמודלים הקיימים ב-JS.
וכפי שניתן להסיק, פקדי ה-HTML ימוקמו מתחתיו בהיררכיה.
יש פקדי HTML רבים אשר מוכרים ב-JS ואינם מופיעים בתרשים זה אשר נועד להמחשה בלבד.
שימוש ב-DOM
ב-DOM נוכל להשתמש על מנת שנוכל לגשת אל אלמנטים שברצוננו לבצע בהם מניפולציות למשל,
כאשר ל-document יש מספר מתודות ומאפיינים שנוכל להיעזר בהם לשם כך:
מאפיינים
- Cookie – מחזיר "עוגיות" מהמסך
- documentMode – מחזיר את שיטת הרינדור שבה משתמש הדפדפן
- domain – מחזיר את שם הכתובת (הדומיין)
- lastModified – מחזיר את התאריך והשעה שבהם השתנה המסמך לאחרונה
- title – מחזיר את כותרת המסמך
- URL – מחזיר את כתובת המסמך
מתודות
- ()close – סוגר את זרם הנתונים שנפתח על ידי המתודה ()document.open
- ()getElementById – ניגש אל האלמנט הראשון אשר נושא מזהה Id זה
- ()getElementByName – ניגש אל כל האלמנטים אשר נושאים שם זה
- ()getElementByTagName – ניגש אל כל האלמנטים אשר נושאים תגית זו
- ()open – פותח זרם לפלט נתונים למטרת איסוף מידע על ידי שימוש במתודה ()document.write
- ()write – כותב קוד JavaScript ל-HTML
- ()writeIn – זהה ל-()write רק שכאן נוספת שורה חדשה לאחר כל ביטוי.
- ()querySelector – ניגש אל האלמנט הראשון אשר נושא את מצביע זה
- ()querySelectorAll – ניגש אל כל האלמנטים אשר עונים למצביע זה (למשל – "div")
ביצוע מניפולציות במסמך HTML ע"י שימוש ב-DOM
עד עתה ראינו כי יש ביכולתנו לגשת לאלמנטים, כעת נראה כיצד נוכל להשתמש בעובדה זו.
צרו את מסמך ה-HTML הבא:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<div id="main">
<div class="box"></div>
</div>
</body>
</html>
מה שאנחנו הולכים לעשות זה :
- לשנות את ה-title
- להוסיף טקסט לאלמנט אשר מחזיק Id בשם "main"
- להחליף את צבע האלמנט שנקרא "box" כאשר נעבור מעליו באמצעות העכבר
כתבו את קובץ ה-js שלכם כך:
// שינוי כותרת המסמך
document.title = "My New Title";
// הוספת טקסט לאלמנט
const main = document.getElementById("main");
main.innerHTML += "This is my added text"
// החלפת צבע אלמנט בעת מעבר העכבר מעל האלמנט
const box = document.querySelector(".box");
box.addEventListener('mouseover', _ => {
box.classList.toggle('changeColor');
});
על מנת שצבע האלמנט "box" ישתנה בכל פעם שנעבור מעליו באמצעות העכבר, ניצור את קובץ ה-CSS הבא:
div#main {
height: 50%;
display: flex;
flex-direction:column;
}
div#main .box {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
background: red;
}
div#main .box.changeColor {
background: blue;
}
כפי שניתן לראות, השתמשנו במאפיין title על מנת לשנות את כותרת ראש המסמך.
את הטקסט ל-main הוספנו על ידי שימוש במאפיין innerHTML אשר נועד לשם כך בדיוק,
שימו לב שאם היינו משתמשים ב-"=" היינו דורסים טקסט שהיה שם לפני כן (במידה והיה),
ולכן השתמשנו באופרטור "=+".
* קיים הבדל בין innerHTML לבין innerText, שכן הם שונים –
innerText יחזיר לנו אלמנט HTML שלם (כלומר את כל הקוד), לעומת innerHTML שמחזיר לנו מחרוזת שהיא הטקסט למעשה.
את שינוי הצבע לאלמנט box ביצענו על ידי שימוש ב-EventListener.
*להסבר מפורט על EventListener ב-JavaScript יש ללחוץ כאן.
כעת נוכל לקבל את התוצאה הבאה:
לסיכום ניתן לומר כי הבנה של מהו DOM וכיצד ניתן להשתמש בו יכולה לתרום רבות לפיתוח האתר שלנו ואף הכרחית במקרים מסוימים.
לקריאה מורחבת על JavaScript DOM יש ללחוץ כאן
