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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

הצגת צמתים של DOM

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

בדיקת צומת

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

  1. לוחצים לחיצה ימנית על Michelangelo למטה ובוחרים באפשרות בדיקה.
    • מיכלאנג'לו
    • Raphael בדיקת צומת החלונית Elements ב-DevTools נפתחת. <li>Michelangelo</li> מודגש בעץ ה-DOM. הדגשת הצומת Michelangelo<
  2. לוחצים על הסמל בדיקה בפינה הימנית העליונה של DevTools.הסמל &#39;בדיקה&#39;

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

    • Magritte
    • סווין

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

אחרי שתשלימו את ההוראות שבתחתית הדף, תצטרכו לחזור לכאן.

הצג סרגלים

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

סרגלים.

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

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

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

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

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

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

    סימון השאילתה בסרגל החיפוש

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

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

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

סימון התיבה &#39;חיפוש בזמן ההקלדה&#39; בהגדרות.

עריכת ה-DOM

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

עריכת תוכן

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

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

    • טיגון
    • מישל

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

    עריכת הטקסט

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

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

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

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

    • Howard
    • יהודה

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

    עריכת הצומת

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

    הוספת מאפיין סגנון לצומת

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

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

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

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

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

    • דיקנים
    • Hank
    • תדוס
    • Brock

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

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

    שינוי סוג הצומת ללחצן

עריכה כ-HTML

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

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

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

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

    התפריט הנפתח של צומת.

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

    השלמה אוטומטית של תגי HTML.

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

    כלי הפיתוח סוגרים את התג באופן אוטומטי.

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

    המערכת מחילה את השינויים.

שכפול צומת

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

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

    • Bonfire of the Vanities
    • ננה
    • אורלנדו
    • רעש לבן

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

    האפשרות Duplicate element (רכיב כפול) מודגשת בתפריט הנפתח.

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

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

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

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

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

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

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

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

    צילום המסך של הצומת נשמר ב&#39;הורדות&#39;.

4 דרכים לצילום מסך באמצעות DevTools

שינוי הסדר של צמתים ב-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. לוחצים לחיצה ימנית על The Stars My Destination שבהמשך ובוחרים באפשרות בדיקה.

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

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

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

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

מחיקת צומת

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

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

    • האיש המאויר
    • דרך המראה
    • קרן

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

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

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

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

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

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

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

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

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

  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. לוחצים לחיצה ימנית על אחים Karamazov למטה ובוחרים באפשרות בדיקה.

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

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

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

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

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

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

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

השלבים הבאים

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

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

בקטע קהילה תוכלו ליצור קשר עם צוות 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. בשלב הזה הוא נראה כמו ה-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> ובוחרים באפשרות Scroll into view. חלון התצוגה גולל למעלה כדי שתוכלו לראות את הצומת Magritte. אם האפשרות הצגה בגלילה לא מופיעה, אפשר לעיין בנספח: אפשרויות חסרות.

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

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

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

איפה לוחצים אם לא רואים את כל האפשרויות