HTMLElement/Event أنواع DOM
آخر تحديث: 2026-10-22
HTMLElement/Event أنواع DOM
كل أنواع برمجة DOM تأتي من مكتبة DOM المدمجة في TS: فالعناصر تشكل سلسلة وراثة (EventTarget → Node → Element → HTMLElement → HTMLInputElement وأمثالها)، وتحمل كائنات الأحداث target. وتُكتسب الأنواع الدقيقة بالتضييق: فـ instanceof يحول HTMLElement إلى صنف فرعي محدد قبل أن تتمكن من لمس .value؛ والقول نفسه في دوال رد الأحداث حيث لا معنى لـ e.target إلا بعد التضييق.
| المجموعة | الإعداد والتطبيق |
|---|---|
| النوع | بناء الجملة |
| الوضع الصارم | غير مطلوب |
ℹ️ معلومة يحوّل المحرر لغة TypeScript إلى JavaScript ثم يشغّلها (بدون فحص أنواع)؛ راجع ناتج كل مثال لنتيجة فحص الأنواع.
📝 الصيغة
// تضييق العناصر: instanceof يقلّص إلى صنف فرعي محدد
function setText(el: HTMLElement, text: string) {
if (el instanceof HTMLInputElement) {
el.value = text; // .value لا تتاح إلا بعد التضييق
} else {
el.textContent = text; // العناصر العادية تستخدم textContent
}
}
// تضييق الأحداث: e.target من نوع EventTarget | null
function onClick(e: Event) {
const t = e.target;
if (t instanceof HTMLInputElement) {
console.log(t.value); // لا تتاح إلا بعد التضييق
}
}⚙️ المعاملات
| HTMLElement | الصنف الأساسي المشترك لكل عناصر HTML: يضم الأعضاء العموميين فقط مثل .textContent/.style؛ وتعيد querySelector افتراضيًا Element ويمكن تضييق الوسم المحدد عبر معاملها العام |
|---|---|
| HTMLInputElement | صنف فرعي محدد لحقول الإدخال يمتلك إضافات مثل .value/.name/.checked — وهو النموذج الكلاسيكي لـ «أعضاء لا تُتاح إلا بعد التضييق» |
| Event.target | العنصر الذي وقع عليه الحدث فعلًا ونوعه EventTarget | null (قد يكون window أو document وغيرهما)؛ وهو يكاد يحتاج دومًا إلى تضييق instanceof قبل الاستخدام |
القيمة المُعادة：التضييق ذاته بلا قيمة معادة — إنه يجعل المترجم «يرى» المرجع في ذلك الفرع بنوع أدق فقط، دون أي كلفة في التشغيل.
▶ مثال
عدّل الكود أدناه واضغط «جرّب» لرؤية نتيجة التحويل:
الناتج：
input.value = "dev@example.com"
textContent = "Welcome"
input "email" = "dev@example.com"
clicked <HTMLElement>
(مخرجات التشغيل بعد الترجمة؛ استُخدمت أصناف شبيهة (stub) بدلًا من DOM الحقيقي — والصياغة نفسها بـ instanceof تعمل على العناصر الحقيقية في المتصفح، حيث تعمل شيفرة DOM فعلًا)💡 نقاط مهمة
ℹ️ معلومة يستحق سلسلة العناصر الوراثية الحفظ: EventTarget → Node → Element → HTMLElement → الوسوم المحددة (HTMLInputElement/HTMLDivElement...). كلما ارتفعت في السلسلة قلّ الأعضاء، وكلما ضيّقت أكثر توفرت لك أعضاء أكثر.
💡 تلميح تتيح querySelector وصولًا بخطوة واحدة عبر المعامل العام: document.querySelector<HTMLInputElement>('#email') تعيد HTMLInputElement | null فتوفّر عليك instanceof؛ لكن لا تحقق في التشغيل — فهي آمنة فقط إذا كان العنصر فعلًا input.
⚠️ تنبيه لا تخلط بين e.target وe.currentTarget: الـ target هو العنصر الذي وقع عليه النقر فعلًا (وقد لا يكون العنصر الذي ربطت المستمع به، وقد يكون null)، بينما الـ currentTarget هو العنصر المرتبط بالمستمع. ولتلقي القيم من النماذج يُفضَّل e.currentTarget (وتوقيعات رد الاتصال بأنواع الأحداث المحددة أدق).
🏷️ الإعداد والتطبيق ذو صلة
💡 حالات ذات صلة
المزيد من الحالات قادم قريبًا.
📚 دروس ذات صلة
❓ أسئلة شائعة
س لماذا نوع إرجاع document.querySelector قابل لأن يكون null؟
ج لأن المحدد قد لا يطابق أي عنصر — فيفرض strictNullChecks عليك معالجة هذا null (فحص if أو وصول ?.). وهذا الموضع أشهر مواضع «إزعاج» الوضع الصارم وأشهر مواضع إنقاذه للحياة.
س كيف أقرأ value لحقل إدخال دون خطأ نوعي؟
ج احصل على HTMLInputElement أولًا: إما عبر querySelector<HTMLInputElement>("#id")، أو بالتضييق بـ instanceof HTMLInputElement على Element العام. فالـ HTMLElement المجرد لا يصل إلى .value — تلك الخاصية في الصنف الفرعي فقط.
س كيف يحصل معامل رد addEventListener على نوع حدث دقيق؟
ج وفّرت مكتبة DOM تحميلات زائدة لأسماء الأحداث الشائعة: في el.addEventListener("input", (e) => ...) يكون e تلقائيًا من النوع الفرعي المطابق للـ Event؛ وبالجمع مع معامل الوسم العام (querySelector<HTMLInputElement>) يمكن تضييق target أكثر. أما الأسماء غير المحمَّلة فتحتاج إلى تأكيد يدوي.
