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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

צפייה בצמתי DOM

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

בדיקת צומת

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

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

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

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

    הדגשת הצומת של מיכלאנג'לו

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

  3. בוחרים באפשרות טוקיו מהרשימה הבאה.

    • טוקיו
    • ביירות

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

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

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

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

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

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

    • ג'ון

      בדיקת הצומת של Ringo

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

    בדיקת הצומת 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
    • האנק
    • תדאוס
    • 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 ומציע תגים להשלמה אוטומטית.

    השלמה אוטומטית של תגי 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. הצומת מוסתר. אפשר גם ללחוץ לחיצה ימנית על הצומת ולהשתמש באפשרות הסתרת רכיב.

    איך הצומת נראה בעץ ה-DOM אחרי שהוא מוסתר

  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>.

    התוצאה של הביטוי הראשון [0]$ במסוף.

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

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

    התוצאה של הביטוי השני של $0 במסוף.

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

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

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

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

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

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

    התוצאה של הביטוי temp1.

העתקת נתיב JS

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

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

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

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

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

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

    התוצאה של הביטוי Copy JS Path

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

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

השלבים הבאים

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

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

אפשר להשתתף בקהילת 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 ואז לבחור באפשרות מתוך תפריט ההקשר שמופיע. אם האפשרות שצוינה לא מופיעה בתפריט ההקשר, נסו ללחוץ לחיצה ימנית במקום אחר, לא על הטקסט של הצומת.

מה עושים אם לא רואים את כל האפשרויות