التلاعب بـ DOM في TypeScript

تشرح هذه المقالة كيفية التلاعب بـ DOM في TypeScript۔

ستتعلم كيفية التلاعب بعناصر DOM وكيفية إضافة أو إزالة العناصر من شجرة DOM من خلال أمثلة برمجية۔

YouTube Video

التلاعب بـ DOM في TypeScript

يتم التلاعب بـ DOM في TypeScript بشكل مماثل لـ JavaScript، لكن TypeScript يوفر فحص الأنواع مما يجعل العمليات أكثر أمانًا۔ DOM (نموذج كائن الوثيقة) هو نموذج كائن يُستخدم للتلاعب بمستندات 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 يسترجع العنصر الذي يحمل معرفًا معينًا ويسمح لك بالوصول إلى محتواه إذا كان موجودًا.`۔

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 يسترجع جميع العناصر التي تطابق مُحدد CSS.`۔

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

• document.querySelectorAll يسترجع جميع العناصر التي تطابق مُحدد CSS المحدد ويسمح لك بالوصول إلى محتواها عن طريق التكرار.`۔

إثبات نوع العنصر

في 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. تغيير نمط العنصر

   يمكنك تعديل الأنماط المضمنة باستخدام خاصية style للعنصر۔

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

• يقوم هذا الكود باسترجاع عنصر محدد، ويغير لون نصّه إلى الأزرق، ويضبط حجم الخط إلى 20 بيكسل۔

3. تغيير خصائص (سمات) العنصر

   إذا كنت تريد تغيير خصائص العنصر، استخدم setAttribute۔

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

• يُغير هذا الكود خاصية href لأول عنصر رابط (link) في الصفحة إلى 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}

• يضيف هذا الكود مستمع حدث (Event Listener) يعرض رسالة في وحدة التحكم عندما يتم النقر على الزر۔
• باستخدام addEventListener، يمكنك الاستماع ومعالجة أحداث متعددة مثل النقرات وحركات الماوس وإدخال لوحة المفاتيح۔

نقاط يجب الانتباه لها عند التلاعب بـ DOM في TypeScript

عند التلاعب بـ DOM باستخدام TypeScript، يمكن أن يساعد الانتباه لتعريفات أنواع العناصر وفحص القيم null في منع الأخطاء وتمكينك من كتابة شفرة قوية۔

1. التحقق من القيمة الفارغة (Null)

   لأن عنصر DOM قد لا يكون موجودًا، يُنصح بالتحقق من عدم وجود قيمة فارغة (Null) قبل التلاعب بالعناصر في TypeScript۔

2. إثبات النوع بشكل صريح

   عند التعامل مع عنصر محدد (مثل HTMLInputElement)، من الشائع استخدام إثبات النوع (as) لتحديد النوع واستخدام خصائص خاصة بالعنصر مثل value۔

مع أخذ هذه النقاط في الاعتبار، يتيح لك التلاعب بـ DOM باستخدام TypeScript كتابة شيفرة أكثر أمانًا وتوقعًا من خلال الجمع بين مرونة JavaScript وأمان الأنواع في TypeScript۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video