תחילת העבודה בהצגה ושינוי של ה-DOM

Kayce Basques

Sofia Emelianova

מומלץ לצפות בסרטון ולסיים את המדריכים האינטראקטיביים האלה כדי ללמוד את העקרונות הבסיסיים של צפייה ושינוי ה-DOM של דף באמצעות כלי הפיתוח ל-Chrome.

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

הצגת צומתי DOM

עץ ה-DOM של חלונית הרכיבים הוא המקום שבו מבצעים את כל הפעילויות הקשורות ל-DOM בכלי הפיתוח.

בדיקת צומת

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

1. לוחצים לחיצה ימנית על מיכאלאנג'לו למטה ובוחרים באפשרות בדיקה.
   • מיכאלאנג'לו
   • רפאל החלונית Elements (רכיבים) של כלי הפיתוח תיפתח. <li>Michelangelo</li> מודגש בעץ DOM.
2. לוחצים על הסמל Inspect בפינה השמאלית העליונה של כלי הפיתוח.

3. לוחצים על הטקסט למטה בטוקיו.

   • טוקיו

   • ביירות

     עכשיו, <li>Tokyo</li> מודגש בעץ ה-DOM.

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

ניווט בעץ ה-DOM באמצעות מקלדת

אחרי שבוחרים צומת בעץ ה-DOM, אפשר לנווט בעץ ה-DOM באמצעות המקלדת.

1. לוחצים לחיצה ימנית על Ringo למטה ובוחרים באפשרות בדיקה. <li>Ringo</li> נבחר בעץ ה-DOM.

   • George
   • Ringo משחק רשת
   • Paul

   • ג'ון

     

2. מקישים פעמיים על מקש החץ למעלה. בחרת את <ul>.

   

3. מקישים על מקש החץ שמאלה. הרשימה <ul> מתכווצת.

4. מקישים שוב על מקש החץ שמאלה. ההורה של הצומת <ul> נבחר. במקרה הזה, זהו הצומת <li> שמכיל את ההוראות לשלב 1.

5. מקישים 3 פעמים על מקש החץ למטה, ובוחרים מחדש את הרשימה <ul> שכרגע כווצה. זה אמור להיראות כך: <ul>...</ul>

6. מקישים על מקש החץ ימינה. הרשימה תתרחב.

גלילה לתצוגה

כשצופים בעץ ה-DOM, לפעמים מתעניין בצומת DOM שלא נמצא כרגע באזור התצוגה. לדוגמה, נניח שגללתם לתחתית הדף, ואתם מעוניינים בצומת <h1> שבראש הדף. גלילה לתצוגה מאפשרת לשנות במהירות את מיקום אזור התצוגה כדי לראות את הצומת.

1. לוחצים לחיצה ימנית על Magritte למטה ובוחרים באפשרות בדיקה.

   • מגריט
   • סוטין

2. עוברים לקטע נספח: גלילה לתצוגה בתחתית הדף הזה. ההוראות ימשיכו לפעול שם.

לאחר שתסיימו את ההוראות שבתחתית הדף, תוכלו לחזור למעלה.

הצג סרגלים

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

אפשר להפעיל את הסרגלים באחת משתי הדרכים הבאות:

• מקישים על Control+Shift+P או Command+Shift+P (Mac) כדי לפתוח את תפריט הפקודות, מקלידים Show rulers on hover ומקישים על Enter.
• בודקים את הגדרות > העדפות > רכיבים > הצגת סרגלים כשמעבירים את העכבר.

יחידת המידה של הסרגלים היא פיקסלים.

חיפוש צמתים

אפשר לחפש בעץ ה-DOM לפי מחרוזת, סלקטור ב-CSS או בורר XPath.

1. מעבירים את הסמן לחלונית רכיבים.
2. מקישים על Control+F או על Command+F (Mac). סרגל החיפוש ייפתח בחלק התחתון של עץ ה-DOM.

3. צריך להקליד The Moon is a Harsh Mistress. המשפט האחרון מודגש בעץ ה-DOM.

   

כפי שצוין למעלה, סרגל החיפוש תומך גם בסלקטורים ב-CSS וב-XPath.

בחלונית Elements בוחרים את התוצאה התואמת הראשונה בעץ ה-DOM ומחזירים אותה לתצוגה באזור התצוגה. כברירת מחדל, הפעולה מתבצעת תוך כדי הקלדה. אם משתמשים תמיד עם שאילתות חיפוש ארוכות, אפשר להגדיר לכלי הפיתוח להריץ חיפוש רק בהקשה על Enter.

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

עריכת ה-DOM

אפשר לערוך את ה-DOM בזמן אמת ולראות איך השינויים האלה משפיעים על הדף.

עריכת תוכן

כדי לערוך את התוכן של צומת, לוחצים לחיצה כפולה על התוכן בעץ ה-DOM.

1. לוחצים לחיצה ימנית על מישל למטה ובוחרים באפשרות בדיקה.

   • טיגון
   • מישל

2. בעץ ה-DOM, לוחצים לחיצה כפולה על Michelle. במילים אחרות, לוחצים לחיצה כפולה על הטקסט שבין <li> לבין </li>. הטקסט מודגש בכחול כדי לציין שהוא נבחר.

   

3. מוחקים את Michelle, מקלידים Leela ומקישים על Enter כדי לאשר את השינוי. הטקסט שלמעלה משתנה ממישל ללילה.

ערוך מאפיינים

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

1. לוחצים לחיצה ימנית על Howard למטה ובוחרים באפשרות בדיקה.

   • Howard
   • וינס

2. לוחצים לחיצה כפולה על <li>. הטקסט מודגש כדי לציין שהצומת נבחר.

   

3. מקישים על מקש החץ ימינה, מוסיפים רווח, מקלידים style="background-color:gold" ואז מקישים על Enter. צבע הרקע של הצומת ישתנה לזהב.

   

אפשר גם להשתמש באפשרות לחיצה ימנית עריכת מאפיין.

עריכת סוג הצומת

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

1. לוחצים לחיצה ימנית על Hank למטה ובוחרים באפשרות בדיקה.

   • דיקן
   • האנק
   • ת'דאוס
   • ברוק

2. לוחצים לחיצה כפולה על <li>. הטקסט li מודגש.

3. מוחקים את li, מקלידים button ומקישים על Enter. הצומת <li> ישתנה לצומת <button>.

   

עריכה כ-HTML

כדי לערוך צמתים כ-HTML עם הדגשת תחביר והשלמה אוטומטית, בוחרים באפשרות עריכה כ-HTML בתפריט הנפתח של הצומת.

1. לוחצים לחיצה ימנית על Leonard למטה ובוחרים באפשרות בדיקה.

   • פני
   • Howard
   • נאור
   • Leonard

2. בחלונית Elements, לוחצים לחיצה ימנית על הצומת הנוכחי ובוחרים עריכה כ-HTML מהתפריט הנפתח.

   

3. מקישים על Enter כדי להתחיל שורה חדשה ומתחילים להקליד <l. הכלי DevTool מדגיש עבורכם תגים לתחביר HTML והשלמה אוטומטית.

   

   הערה: בנוסף, כלי פיתוח יכולים להשלים באופן אוטומטי מאפייני DOM.

4. צריך לבחור את הרכיב li מתפריט ההשלמה האוטומטית ולהקליד >. כלי הפיתוח מוסיפים באופן אוטומטי את תג הסגירה </li> אחרי הסמן.

   

5. מקלידים Sheldon בתוך התג ומקישים על Control / Command + Enter כדי להחיל את השינויים.

   

שכפול של צומת

אפשר לשכפל רכיב באמצעות האפשרות רכיב כפול לחיצה ימנית.

1. לוחצים לחיצה ימנית על ננה למטה ובוחרים באפשרות בדיקה.

   • שריפת השיער
   • נאנה
   • אורלנדו
   • רעש לבן

2. בחלונית רכיבים, לוחצים לחיצה ימנית על <li>Nana</li> ובוחרים רכיב כפול מהתפריט הנפתח.

   

3. חזרה לדף. הפריט ברשימה שוכפל באופן מיידי.

אפשר גם להשתמש במקשי הקיצור: Shift + Alt + החץ למטה (ב-Windows וב-Linux) ו-Shift + Option + חץ למטה (ב-MacOS).

צילום מסך של צומת

אפשר לצלם כל צומת בנפרד בעץ ה-DOM באמצעות צילום מסך של צומת.

1. לוחצים לחיצה ימנית על תמונה כלשהי בדף הזה ובוחרים באפשרות בדיקה.

2. בחלונית רכיבים, לוחצים לחיצה ימנית על כתובת ה-URL של התמונה ובוחרים באפשרות צילום המסך של הצומת בתפריט הנפתח.

   

3. צילום המסך יישמר בספריית ההורדות.

   

סידור מחדש של צומתי DOM

אפשר לגרור צמתים כדי לשנות את הסדר שלהם.

1. לוחצים לחיצה ימנית על Elvis Presley למטה ובוחרים באפשרות בדיקה. שימו לב שזהו הפריט האחרון ברשימה.

   • סטיבי וונדר
   • טום ווייטס
   • ברי סחרוף
   • אלביס פרסלי

2. בעץ ה-DOM, גוררים את <li>Elvis Presley</li> לראש הרשימה.

   

אילוץ מצב

אפשר לאלץ צמתים להישאר במצבים כמו :active, :hover, :focus, :visited ו-:focus-within.

1. מעבירים את העכבר מעל שר הזבובים שלמטה. צבע הרקע הופך לכתום.

   • שר הזבובים
   • פשע ועונשים
   • מובי דיק

2. לוחצים לחיצה ימנית על שר הזבובים למעלה ובוחרים באפשרות בדיקה.

3. לוחצים לחיצה ימנית על <li class="demo--hover">The Lord of the Flies</li> ובוחרים באפשרות Force State > :hover. אם אתם לא רואים את האפשרות הזו, אפשר לעיין בקטע נספח: אפשרויות חסרות. צבע הרקע נשאר כתום למרות שלא למעשה מעבירים את העכבר מעל הצומת.

הסתרת צומת

כדי להסתיר צומת, מקישים על H.

1. לוחצים לחיצה ימנית על היעד שלי בכוכבים למטה ובוחרים באפשרות בדיקה.

   • הספירה ממונטה קריסטו
   • הכוכבים היעד שלי

2. מקישים על מקש H. הצומת מוסתר. ניתן גם ללחוץ לחיצה ימנית על הצומת ולהשתמש באפשרות הסתרת רכיב.

   

3. מקישים שוב על מקש H. הצומת יוצג שוב.

מחיקת צומת

מקישים על Delete כדי למחוק צומת.

1. לוחצים לחיצה ימנית על בסיס למטה ובוחרים באפשרות בדיקה.

   • האיש המאויר
   • דרך זכוכית המגדלת
   • קרן

2. מקישים על מקש Delete. הצומת נמחק. אפשר גם ללחוץ לחיצה ימנית על הצומת ולהשתמש באפשרות מחיקת רכיב.

3. מקישים על Control+Z או Command+Z (Mac). הפעולה האחרונה תבוטל והצומת יופיע שוב.

גישה לצמתים במסוף

בכלי הפיתוח יש כמה קיצורי דרך לגישה לצומתי DOM מהמסוף, או לקבלת הפניות JavaScript אליהם.

הפניה לצומת שנבחרת כרגע באמצעות $0

כשבודקים צומת, הטקסט == $0 שליד הצומת מאפשר להפנות לצומת הזה במסוף באמצעות המשתנה $0.

1. לוחצים לחיצה ימנית על יד שמאל של החושך למטה ובוחרים באפשרות בדיקה.

   • יד שמאל של האפלה
   • חולית

2. מקישים על המקש Escape כדי לפתוח את חלונית ההזזה של המסוף.

3. מקלידים $0 ומקישים על המקש Enter. התוצאה של הביטוי מראה ש-$0 מקבל ערך <li>The Left Hand of Darkness</li>.

   

4. מעבירים את העכבר מעל התוצאה. הצומת מודגש באזור התצוגה.

5. לוחצים על <li>Dune</li> בעץ ה-DOM, מקלידים $0 שוב במסוף ולוחצים שוב על Enter. עכשיו, תוצאת הפונקציה $0 היא <li>Dune</li>.

   

אחסון כמשתנה גלובלי

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

1. לוחצים לחיצה ימנית על השינה הגדולה למטה ובוחרים באפשרות בדיקה.

   • השינה הגדולה
   • להתראות ארוכות

2. לוחצים לחיצה ימנית על <li>The Big Sleep</li> בעץ ה-DOM ובוחרים באפשרות אחסון כמשתנה גלובלי. אם אתם לא רואים את האפשרות הזו, אפשר לעיין בקטע נספח: אפשרויות חסרות.

3. מקלידים temp1 במסוף ומקישים על Enter. כתוצאה של הביטוי, מופיעה הערכה של המשתנה לצומת.

   

העתקת נתיב JS

מעתיקים את נתיב ה-JavaScript לצומת אם צריך להפנות אליו בבדיקה אוטומטית.

1. לוחצים לחיצה ימנית על האחים קאראמאזוב למטה ובוחרים באפשרות בדיקה.

   • האחים קראמזוב
   • פשע ועונשים

2. לוחצים לחיצה ימנית על <li>The Brothers Karamazov</li> בעץ ה-DOM ובוחרים באפשרות Copy > Copy JS Path. ביטוי document.querySelector() שמפנה לצומת הועתק ללוח.

3. לוחצים על Control+V או Command+V (Mac) כדי להדביק את הביטוי במסוף.

4. מקישים על Enter כדי להעריך את הביטוי.

   

שינוי הפסקה ב-DOM

כלי הפיתוח מאפשרים להשהות קוד JavaScript של דף כאשר קוד ה-JavaScript משנה את ה-DOM. ראו נקודות עצירה לשינוי DOM.

השלבים הבאים

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

בדף הבית של כלי הפיתוח ל-Chrome אפשר לראות את כל מה שאפשר לעשות עם כלי הפיתוח.

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

נספח: HTML לעומת DOM

בקטע הזה נסביר בקצרה את ההבדל בין HTML לבין ה-DOM.

כשמשתמשים בדפדפן אינטרנט כדי לבקש דף כמו https://example.com, השרת מחזיר HTML באופן הבא:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

הדפדפן מנתח את ה-HTML ויוצר עץ של אובייקטים כך:

html
  head
    title
  body
    h1
    p
    script

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

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

הקוד הזה מסיר את הצומת h1 ומוסיף עוד צומת p ל-DOM. עכשיו ה-DOM המלא נראה כך:

html
  head
    title
  body
    p
    script
    p

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

למידע נוסף, ראו מבוא ל-DOM.

נספח: גלילה לתצוגה

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

1. עדיין צריך לבחור את הצומת <li>Magritte</li> בעץ ה-DOM שלך. אם לא, חוזרים אל גלילה לתצוגה ומתחילים מחדש.

2. לוחצים לחיצה ימנית על הצומת <li>Magritte</li> ובוחרים באפשרות גלילה לתצוגה. אזור התצוגה גולל חזרה כדי לראות את הצומת של Magritte. אם אתם לא רואים את האפשרות גלילה לתצוגה, אפשר לעיין בקטע נספח: אפשרויות חסרות.

   

נספח: אפשרויות חסרות

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