Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

JavaScript – DOM

JavaScript DOM
JavaScript DOM

DOM או Document Object Model הוא למעשה API (ממשק תכנות יישומים) אשר מגדיר את המבנה הלוגי של מסמכי HTML ו-XML ואת דרך הגישה אליהם.

את ה-DOM נוכל לתאר מבחינה לוגית כעץ – או יותר נכון אוסף של עצים שמסמלים לנו את המבנה הלוגי של מסמך ה-HTML שלנו.
כלומר שה-DOM מספק לנו את הגישה שאנו צריכים כדי לגשת לרכיבי HTML דרך קוד JavaScript.
נוכל לבאר זאת באמצעות תרשים זרימה:

JavaScript DOM Tree
JavaScript DOM Tree

 

כפי שתוכלו להבחין, מודל המסמך (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 יש ללחוץ כאן

 

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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