الفئات المستخدمة للتعامل مع DOM / التعامل مع الأحداث في TypeScript

في هذه المقالة، سنشرح الفئات المستخدمة للتعامل مع DOM / التعامل مع الأحداث في TypeScript۔

يمكنك تعلم المزيد عن فئة Document، والفئات Element وNodeList، ومختلف الفئات المتعلقة بالأحداث من خلال أمثلة الكود.۔

YouTube Video

الفئات المستخدمة للتعامل مع DOM / التعامل مع الأحداث في TypeScript

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

Element

Element هو واجهة تمثل العناصر الفردية في 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 هي خاصية للتحكم في الأصناف (classes)، وتتيح لك إضافة الأصناف أو حذفها أو تبديلها۔
• طريقة setAttribute تقوم بتعيين خاصية (Attribute) على العنصر۔

شرح الكود

• يعرض هذا الكود مثالاً على تعيين المحتوى باستخدام innerHTML و textContent للعناصر التي تم جلبها بواسطة querySelector، إضافة الفئات باستخدام classList، وتعيين خصائص مخصصة باستخدام setAttribute۔ تتم العمليات بطريقة آمنة من ناحية النوع باستخدام الأنواع العامة۔

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، يمكنك تعطيل السلوك الافتراضي لإرسال النموذج مثل الانتقال إلى صفحة أخرى أو إعادة تحميل الصفحة۔ بدلاً من ذلك، يتم تنفيذ عملية مخصصة—وهي تسجيل الإخراج—هنا۔

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 و 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، يتم تحسين التحقق من الأنواع عند التعامل مع DOM ومعالجة الأحداث۔ فيما يلي أمثلة على التعامل الآمن مع DOM ومعالجة الأحداث في TypeScript۔

الاستماع للأحداث مع التصنيف (Typed Event Listeners)

عند إضافة مستمعين للأحداث، يساعد تحديد نوع الحدث على التحقق من الأنواع ومنع الوصول إلى الخصائص غير الصحيحة۔

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});

• هذا الكود مثال على استخدام مستمع أحداث مضبوط النوع لمعالجة أحداث الإدخال والحصول بشكل آمن على وتسجيل القيمة الحالية لحقل الإدخال۔

معالجة الأحداث العامة

باستخدام الأنماط العامة (generics) في 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);

• هذا الكود مثال على معالج أحداث عام يستخدم القوالب (Generics)، حيث يسجل نوع الحدث واسم الوسم (Tag name) للعنصر المستهدف۔

الملخص

في TypeScript، يتم تطبيق الأنواع على واجهات برمجة DOM القياسية أثناء التلاعب بـDOM ومعالجة الأحداث، مما يعزز أمان الكود وقابليته للقراءة۔ من خلال استخدام الفصول مثل Document و Element، والفصول المرتبطة بالأحداث مثل Event، وMouseEvent، وKeyboardEvent، يمكن تحقيق تطوير آمن من حيث الأنواع۔ بالإضافة إلى ذلك، يتيح استخدام querySelector<T>() أو HTMLCollectionOf<T> إجراء عمليات آمنة من ناحية النوع على DOM۔

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

YouTube Video