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

Kayce Basques

Sofia Emelianova

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

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

צפייה בצמתי DOM

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

בדיקת צומת

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

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

   • מיכלאנג'לו
   • רפאל

   החלונית רכיבים של כלי הפיתוח נפתחת. התג <li>Michelangelo</li> מודגש בעץ ה-DOM.

   

2. לוחצים על בחירת רכיב.

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 ובוחרים באפשרות בדיקה.

   • מגריט
   • Soutine

2. הוראות נוספות מופיעות בקטע התוסף גלילה לתצוגה.

אחרי שמסיימים את התהליך, חוזרים לחלק הזה.

הצג סרגלים

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

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

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

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

חיפוש צמתים

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

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

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

   

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

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

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

עריכת ה-DOM

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

עריכת התוכן

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

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

   • טיגון
   • מיכל

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

   

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

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

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

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

   • Howard
   • וינס

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

   

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

   

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

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

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

   • Dean
   • Hank
   • תדאוס
   • Brock

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

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

   

עריכה כ-HTML

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

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

   • פני
   • Howard
   • Rajesh
   • Leonard

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

   

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

   

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

   

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

שכפול צומת

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

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

   • מדורה של הבלים
   • Nana
   • אורלנדו
   • רעש לבן

2. בחלונית Elements, לוחצים לחיצה ימנית על <li>Nana</li> ובוחרים באפשרות Duplicate element מהתפריט הנפתח.

   

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

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

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

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

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

2. בחלונית Elements, לוחצים לחיצה ימנית על כתובת ה-URL של התמונה ובוחרים באפשרות Capture node screenshot מהתפריט הנפתח.

   

3. צילום המסך נשמר בתיקייה 'הורדות' (Windows ו-macOS).

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

שינוי הסדר של צמתי DOM

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

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

   • Stevie Wonder
   • Tom Waits
   • ברי סחרוף
   • אלביס פרסלי

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

אילוץ מצב

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

1. מעבירים את העכבר מעל הפריט The Lord of the Flies ברשימה. צבע הרקע הופך לכתום.

   • בעל הזבוב
   • פשע ועונש
   • Moby Dick

2. לוחצים לחיצה ימנית על פריט הרשימה The Lord of the Flies ובוחרים באפשרות בדיקה.

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

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

הסתרת צומת

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

1. ברשימה הבאה, לוחצים לחיצה ימנית על The Stars My Destination ובוחרים באפשרות בדיקה.

   • הרוזן ממונטה כריסטו
   • The Stars My Destination

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

   

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

מחיקת צומת

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

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

   • האיש המאויר
   • מבעד למראה
   • קרן

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

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

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

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

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

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

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

   • היד השמאלית של החושך
   • Dune

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

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

   

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

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

   

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

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

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

   • השינה הגדולה
   • The Long Goodbye

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

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

   

העתקת נתיב JS

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

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

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

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

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

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

   

הפסקת הביצוע בשינויים ב-DOM

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

השלבים הבאים

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

להמשיך לקרוא:

• מידע על מקשי קיצור בחלונית Elements
• בתיעוד של כלי הפיתוח אפשר לקרוא על כל האפשרויות הנוספות של כלי הפיתוח.

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

נספח

לקבל מידע נוסף על נושאים ספציפיים.

‫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. בשלב הזה, האובייקטים זהים ב-DOM וב-HTML.

נניח שקובץ ה-script.js בתחתית ה-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 ב-MDN.

גלילה עד שהתוכן יהיה גלוי לעין

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

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

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

   

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

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