תחילת העבודה בהצגה ושינוי של ה-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. לוחצים על הסמל Inspect בפינה השמאלית העליונה של כלי הפיתוח.הסמל &#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. מעבירים את הסמן לחלונית רכיבים.
  2. מקישים על Control+F או על Command+F (ב-Mac). סרגל החיפוש נפתח בחלק התחתון של עץ ה-DOM.

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

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

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

בחלונית Elements בוחרים את התוצאה התואמת הראשונה בעץ ה-DOM ומחזירים אותה לתצוגה באזור התצוגה. כברירת מחדל, זה קורה בזמן ההקלדה. אם משתמשים תמיד עם שאילתות חיפוש ארוכות, אפשר להגדיר לכלי הפיתוח להריץ חיפוש רק בהקשה על 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 בתפריט הנפתח.

    האפשרות &#39;רכיב כפול&#39; מודגשת בתפריט הנפתח.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

העתקת נתיב JS

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

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

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

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

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

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

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

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

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

השלבים הבאים

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

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

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

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

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

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