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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

הצגת צומתי DOM

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

בדיקת צומת

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

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

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

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

    הדגשת הצומת Michelangelo

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

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

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

    האפשרות <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.

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

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

עריכת ה-DOM

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

עריכת התוכן

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

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

    • טיגון
    • מיכל

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

    • דין
    • האנק
    • Thaddeus
    • 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 מהתפריט הנפתח.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

מצב הכוח

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

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

    • בעל זבוב
    • החטא ועונשו
    • Moby Dick

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

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

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

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

כשבודקים צומת (כולל רכיבי פסאודו כמו ::before או ::after), הטקסט == $0 לצד הצומת מציין שאפשר להפנות לצומת הזה ב-Console באמצעות המשתנה $0.

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

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

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

העתקת נתיב JS

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

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

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

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

  3. לוחצים על Control+V או על Command+V (ב-macOS) כדי להדביק את הביטוי ב-Console.

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

    התוצאה של הביטוי &quot;העתקת נתיב JS&quot;

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

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

השלבים הבאים

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

המשך קריאה:

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

נספח

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

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

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

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