מכללת פרוגיקס
JavaScript ופיתוח אתרים
מתחילים ובני נוער

DOM ב-JavaScript לנוער: הכפתור שהופך דף לאינטראקטיבי

כפתור נראה כמו מלבן קטן, אבל לחיצה עליו מפעילה שרשרת שלמה: הדפדפן מזהה אירוע, JavaScript משנה אובייקט והעמוד מציג תוצאה חדשה. מיני-פרויקט אחד חושף את כל החיבור.

עודכן: יולי 2026
כ-4 דקות קריאה
DOM, אירועים ושינוי עמוד

ניסוי של חצי דקה

לחיצות: 0

לחצו כאן

הכפתור כאן הוא הדגמה חזותית בלבד. מיד נבנה את הגרסה האמיתית בקוד ונראה מי אחראי לכל שינוי.

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

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

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

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

חלוקת תפקידים

שלוש שכבות נפגשות בכפתור אחד

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

HTML
מגדיר את המבנה
כותרת, פסקה וכפתור
CSS
קובע את המראה
צבע, מרווח וגודל
JavaScript
מגיב ומשנה
לחיצה, חישוב ועדכון
מיני-פרויקט

בונים מונה לחיצות בשני חלקים

ב-HTML יוצרים פסקה וכפתור ונותנים לכל אחד מזהה ייחודי. המזהה אינו התנהגות; הוא רק כתובת נוחה שדרכה JavaScript ימצא את האלמנט הנכון.

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

HTML

<p id="counter">לחיצות: 0</p>
<button id="count-button">לחצו כאן</button>

JavaScript

const button = document.querySelector('#count-button');
const counter = document.querySelector('#counter');
let clicks = 0;

button.addEventListener('click', () => {
  clicks += 1;
  counter.textContent = `לחיצות: ${clicks}`;
});
מריצים לאט

מה באמת קורה בין הטעינה ללחיצה

קריאה לפי הסדר הופכת ״קסם בדפדפן״ לתהליך שאפשר לנבא, לבדוק ולתקן.

  1. 01

    הדף נטען

    הדפדפן בונה עץ של אובייקטים מתוך ה-HTML.

  2. 02

    הקוד בוחר

    querySelector מחפש בעץ את האלמנט שמתאים לבורר.

  3. 03

    המשתמש לוחץ

    הדפדפן יוצר אירוע ומפעיל את הפונקציה שנרשמה.

  4. 04

    המסך מתעדכן

    הפונקציה משנה את הטקסט והדפדפן מצייר את התוצאה.

מעבדת דיבאגינג

כשהכפתור שותק, לא מנחשים

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

מתקבלת שגיאת null

בודקים שהבורר מתאים ל-id או למחלקה ושאלמנט ה-HTML כבר נטען.

אין שגיאה, אבל הלחיצה לא עושה דבר

מציבים console.log בתוך פונקציית האירוע ובודקים אם היא מופעלת.

המספר משתנה בצורה מוזרה

בודקים אם המשתנה נשמר כמספר ולא כמחרוזת שמחברת טקסט.

רק חלק מהעמוד מתעדכן

מוודאים שהקוד משנה את האלמנט הנכון ולא את הראשון עם בורר דומה.

שלוש גרסאות, בלי להחליף פרויקט

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

גרסה א׳

הוסיפו כפתור איפוס שמחזיר את המונה לאפס.

תרגול של בחירת אלמנט ואירוע נוסף.

גרסה ב׳

שנו את צבע ההודעה אחרי חמש לחיצות.

חיבור בין תנאי, classList ומצב.

גרסה ג׳

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

פירוק רעיון לנתונים, כללים ומשוב.

משימת 20 דקות

הפכו את המונה לכלי שנותן משוב

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

ממשיכים לדיבאגינג