מניפולציה על ה-DOM ב-TypeScript

מאמר זה מסביר כיצד לבצע מניפולציה על ה-DOM ב-TypeScript.

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

YouTube Video

מניפולציה על ה-DOM ב-TypeScript

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

בואו נציג את השיטות הבסיסיות לתפעול ה-DOM באמצעות TypeScript.

קבלת אלמנטים מתוך ה-DOM

השתמשו באובייקט document כדי לקבל אלמנטים ב-HTML. השיטות הבאות נפוצות לשימוש:.

1. document.getElementById document.getElementById מקבל את האלמנט עם מזהה (ID) מסוים.`.

1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}

• document.getElementById מאחזר את האלמנט עם ה-ID המסוים ומאפשר לך לגשת לתוכן שלו אם הוא קיים.`.

2. document.querySelector document.querySelector מאחזר את האלמנט הראשון שתואם לבורר (selector) ה-CSS.`.

1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}

• document.querySelector מאחזר את האלמנט הראשון שתואם לבורר ה-CSS המסוים ומאפשר לך לגשת לתוכן שלו אם הוא קיים.`.

3. document.querySelectorAll document.querySelectorAll מאחזר את כל האלמנטים שתואמים לבורר (selector) ה-CSS.`.

1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));

• document.querySelectorAll מאחזר את כל האלמנטים שתואמים לבורר ה-CSS המסוים ומאפשר לך לגשת לתוכן שלהם באמצעות איטרציה.`.

הצגת טיפוס אלמנט (Type Assertion)

ב-TypeScript, הצגה מפורשת של הטיפוס מאפשרת שימוש בשיטות ובמאפיינים ייחודיים יותר של האלמנט.

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}

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

ביצוע מניפולציה ב-DOM

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

1. שינוי טקסט של אלמנט

   אפשר לשנות את הטקסט או את ה-HTML של אלמנט כלשהו באמצעות textContent או innerHTML.

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}

• ניתן להשתמש ב-textContent או innerHTML של אלמנט כדי לשנות את הטקסט או תוכן ה-HTML שמוצג בו.

2. שינוי הסגנון של אלמנט

   ניתן לשנות סגנונות (inline) באמצעות המאפיין style של האלמנט.

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}

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

3. שינוי מאפיינים (Attributes) של אלמנט

   אם ברצונכם לשנות מאפיינים של אלמנט, השתמשו ב-setAttribute.

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}

• הקוד הזה משנה את המאפיין href של האלמנט הראשון מסוג קישור בעמוד ל-https://example.com.

4. תמרון מחלקות (classes) של אלמנט

   להוספה או הסרה של מחלקות באלמנט, השתמשו ב-classList.

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}

• הקוד הזה מוסיף את המחלקה (class) active ומסיר את המחלקה inactive מאלמנט מסוים.

הוספה והסרה של אלמנטים מה-DOM

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

1. יצירת אלמנטים חדשים והוספתם

   השתמשו ב-document.createElement כדי ליצור אלמנט חדש ולהוסיפו ל-DOM.

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body

• הקוד הזה יוצר אלמנט <div> חדש, מגדיר את הטקסט שלו ומוסיף אותו אל ה-<body> של הדף.

2. הסרת אלמנטים

   כדי להסיר אלמנט, השתמשו ב-removeChild או remove.

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}

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

הוספת אירועים

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

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}

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

נקודות חשובות למניפולציה ב-DOM ב-TypeScript

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

1. בדיקת Null

   מכיוון שאלמנט DOM עלול לא להתקיים, מומלץ לבצע בדיקת null לפני ביצוע מניפולציה על אלמנטים ב-TypeScript.

2. הצהרת טיפוס מפורשת

   בעת עבודה עם אלמנט מסוים (למשל, HTMLInputElement), נהוג להשתמש ב-type assertion (as) כדי לציין את הטיפוס ולאפשר שימוש במאפייני האלמנט כמו value.

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

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

YouTube Video