מחלקות המשמשות לטיפול ב-DOM/אירועים ב-TypeScript

במאמר זה נסביר את המחלקות המשמשות לטיפול ב-DOM/אירועים ב-TypeScript.

תוכל ללמוד על מחלקת Document, מחלקות Element ו-NodeList, ומחלקות שונות הקשורות לאירועים באמצעות דוגמאות קוד.

YouTube Video

מחלקות המשמשות לטיפול ב-DOM/אירועים ב-TypeScript

למניפולציה של ה-DOM ולטיפול באירועים ב-TypeScript, נעשה בעיקר שימוש בממשקי ה-Document Object Model (DOM). במניפולציה של ה-DOM וטיפול באירועים, נעשה שימוש במחלקות וממשקים סטנדרטיים של JavaScript, אך ב-TypeScript מתווספת להם מידע על סוגי נתונים, המאפשר פעולה בטוחה יותר.

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

מחלקות/ממשקים עיקריים המשמשים למניפולציה של ה-DOM

Document

Document הוא אובייקט המייצג מסמכי HTML או XML. משמש לגישה לעץ ה-DOM או לחיפוש אלמנטים.

דוגמת קוד

 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});

שיטות עיקריות

• getElementById מאחזר אלמנט עם מאפיין id מסוים.
• querySelector מאחזר אלמנט בעזרת בורר CSS.
• createElement יוצר אלמנט HTML חדש.

הסבר קוד

• הקוד הזה מאחזר אלמנט בעל מאפיין id באמצעות getElementById ומשנה את הטקסט שלו. הוא גם מאחזר אלמנט כפתור באמצעות querySelector ומוסיף מאזין לאירוע לחיצה (click). בעת לחיצה, הוא יוצר אלמנט div חדש באמצעות createElement ומוסיף אותו לתוכן הראשי. נעשה שימוש בג'נריקס והצהרות טיפוס (type assertions) כדי להבטיח בטיחות טיפוסים במהלך פעולות ה-DOM.

Element

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

דוגמת קוד

 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}

מאפיינים ושיטות עיקריים

• המאפיין innerHTML מאפשר להגדיר או לקבל את התוכן ה-HTML של אלמנט.
• המאפיין textContent מאפשר להגדיר או לקבל את תוכן הטקסט של אלמנט.
• classList היא תכונה שמאפשרת לנהל מחלקות, ומאפשרת להוסיף, להסיר ולשנות מחלקות.
• הפונקציה setAttribute מגדירה מאפיין לאלמנט.

הסבר קוד

• הקוד הזה מדגים דוגמה להגדרת תוכן באמצעות innerHTML ו-textContent לאלמנטים שנשלפו בעזרת querySelector, הוספת מחלקות (classes) בעזרת classList, וקביעת מאפיינים מותאמים אישית באמצעות setAttribute. הפעולות מתבצעות באופן בטוח טיפוסית (type-safe) בעזרת ג'נריקס.

NodeList ו-HTMLCollection

NodeList ו-HTMLCollection מייצגים אוספים המכילים אלמנטים מרובים ב-DOM. לדוגמה, querySelectorAll מחזיר NodeList, ו-getElementsByClassName מחזיר HTMLCollection.

דוגמת קוד

 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});

• הקוד הזה מדגים עבודה ישירה עם NodeList בעזרת forEach והמרת HTMLCollection למערך לצורך איטרציה.

מחלקות/ממשקים עיקריים המשמשים לטיפול באירועים

Event

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

דוגמת קוד

 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});

מאפיינים ושיטות עיקריים

• המאפיין target מייצג את האלמנט (EventTarget) שבו התרחש האירוע.
• type מייצג את סוג האירוע שהתרחש, כגון click או input.
• הפונקציה preventDefault מבטלת את הפעולה הברירתית של האירוע.

הסבר קוד

• הקוד הזה מדגים כיצד להוסיף מאזין לאירוע submit לטופס. target מתייחס לאלמנט הטופס שבו התרחש האירוע, ו-type מציין את סוג האירוע (במקרה זה, "submit"). על ידי קריאה למתודה preventDefault, באפשרותך לבטל התנהגויות ברירת מחדל של שליחת טופס, כגון ניווט בדף או רענון. במקום זאת, תהליך מותאם אישית—לרישום פלט (logging)—מתבצע כאן.

MouseEvent

MouseEvent מייצג אירועים הקשורים לפעולות עכבר. אירועי עכבר כמו click ו-mousemove משתמשים במחלקה זו.

דוגמת קוד

1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}

• הקוד הזה הוא דוגמה לשימוש ב-MouseEvent כדי לרשום את קואורדינטות העכבר.

תכונות עיקריות

• clientX הוא הקואורדינטה האופקית (X) של סמן העכבר בדף.
• clientY הוא הקואורדינטה האנכית (Y) של סמן העכבר בדף.
• button מציין איזה כפתור בעכבר נלחץ. 0 הוא הכפתור השמאלי, 1 הוא האמצעי, ו-2 הוא הימני בעכבר.

KeyboardEvent

KeyboardEvent מייצג אירועים הקשורים לפעולות המקלדת. אירועי keydown ו-keyup שייכים לקטגוריה זו.

דוגמת קוד

 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});

תכונות עיקריות

• key הוא שם המקש שנלחץ, כגון Enter או a.
• code הוא הקוד שתואם למקש במקלדת.
• altKey, ctrlKey, ו-shiftKey הם מאפיינים שמציינים האם נלחצו מקשי Alt, Ctrl או Shift.

הסבר קוד

• הקוד הזה משתמש ב-KeyboardEvent כדי לרשום את שמו של המקש שנלחץ (key), את קוד המקש התואם (code), וכן האם מקשי שינוי (altKey, ctrlKey, shiftKey) נלחצו. בנוסף, הוא מבצע פעולה מיוחדת כאשר מקש Enter נלחץ.

FocusEvent

FocusEvent מתייחס לאירועים של קבלת או איבוד מוקד (Focus). אירועי focus ו-blur שייכים לקטגוריה זו.

דוגמת קוד

 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}

• הקוד הזה הוא דוגמה לשימוש ב-FocusEvent לזיהוי ורישום מתי שדה קלט מקבל או מאבד פוקוס.

הקלדה ב-TypeScript

בשימוש ב-TypeScript, בדיקת טיפוסים (Types) בשינוי DOM ופעולות על אירועים משופרת. להלן דוגמאות לשינוי DOM ולטיפול באירועים עם בדיקת טיפוס מובטחת ב-TypeScript.

מאזיני אירועים עם טיפוס מוגדר

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

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});

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

טיפול כללי באירועים

שימוש בגנריות ב-TypeScript מאפשר טיפול כללי באירועים התומך בסוגים שונים של אירועים.

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);

• הקוד הזה הוא דוגמה למטפל אירועים כללי (generic handler) באמצעות generics, אשר רושם את סוג האירוע ושם התג של האלמנט היעד.

סיכום

ב-TypeScript, הטיפוסים מוחלים על APIs סטנדרטיים של ה-DOM במהלך שינוי DOM וטיפול באירועים, ומשפרים את בטיחות הקריאה ואת קריאות הקוד. על ידי שימוש במחלקות כמו Document ו-Element, ובמחלקות הקשורות לאירועים כמו Event, MouseEvent, ו-KeyboardEvent, ניתן לבצע פיתוח עם בדיקת טיפוס מובטחת. בנוסף, שימוש ב-querySelector<T>() או HTMLCollectionOf<T> מאפשר מניפולציות DOM בטוחות טיפוסית.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video