في هذا الدرس 5تصفّح المواضيع
يعمل الكائن document بوصفه مصنع العقد المركزي في المتصفح؛ فجميع دوال الإنشاء مثل document.createElement() وdocument.createTextNode() وdocument.createDocumentFragment() وdocument.createComment() تبني العقدة في الذاكرة أولاً بمعزل تام عن الصفحة المرئية.
يتيح لك هذا الفصل تجهيز السمات والفئات والأبناء بهدوء خارج الشجرة الحية، ثم إدراج البنية المكتملة دفعةً واحدة دون إرباك المتصفح بحسابات رسم متكررة.
يؤدي إلحاق مئات العناصر واحداً تلو الآخر داخل قائمة حية إلى استنزاف المعالج بإعادة حساب التخطيط البصري مع كل عنصر. تحل الدالة document.createDocumentFragment() هذه المشكلة بإنشاء حاوية خفيفة بلا وسم خارجي (nodeType === 11) تجمع العناصر في الذاكرة.
وعند استدعاء list.appendChild(frag) تنتقل العناصر الأبناء فقط دفعةً واحدة إلى القائمة برسمة متصفح واحدة، وتفرغ الحاوية المؤقتة تلقائياً كما يوضح الجدول المقارن:
| دالة الإنشاء | قيمة nodeType | هل تترك غلافاً بالشجرة؟ | الاستخدام العملي الأنسب |
|---|---|---|---|
document.createElement(tag) | 1 | نعم (وسم فعلي) | بناء عناصر الواجهة القياسية |
document.createTextNode(str) | 3 | لا (عقدة نصية) | إدراج نصوص آمنة بجوار الأيقونات |
document.createComment(str) | 8 | لا (تعليق HTML) | علامات إرشادية غير مرئية بالقوالب |
document.createDocumentFragment() | 11 | لا (تفرغ فور الإلحاق) | تجميع عشرات العناصر وإدراجها برسمة واحدة |
const frag = document.createDocumentFragment();
const items = ['DOM Tree', 'Fragment', 'Single Paint'];
for (const label of items) {
const li = document.createElement('li');
li.textContent = label;
frag.appendChild(li);
}
document.getElementById('list').appendChild(frag);يمنحك الجمع بين document.createElement() وdocument.createTextNode() قدرة دقيقة على بناء عناصر مركبة — مثل زر يضم أيقونة يتبعها نص متغير — دون مسح الأيقونة المجاورة كما يفعل textContent ودون مخاطر حقن الوسوم في innerHTML.
ولأن المتصفح يتعامل مع العقدة النصية بوصفها حروفاً صرفة فقط، يُعرض أي نص يشبه الوسوم مثل <img onerror=1> كما هو بأمان تام دون أدنى تنفيذ برمجي.
const badge = document.createElement('span');
badge.setAttribute('class', 'tag');
const safeText = document.createTextNode('<img onerror=1> Safe!');
badge.appendChild(safeText);
document.getElementById('host').appendChild(badge);توفّر واجهة المستند دالتين إضافيتين تصادفهما كثيراً عند قراءة محركات القوالب والشيفرات المؤسسية:
- تنئشئ
document.createComment(data)عقدة تعليق غير مرئية (nodeType === 8) تستعملها مكتبات الواجهات الحديثة كعلامات ربط ثابتة لحفظ مواضع العرض الشرطي. - تنشئ
document.createAttribute(name)كائن سمة مستقل (Attr) يُربط بالعنصر عبرsetAttributeNode()، وإن كانت الدالة المباشرةel.setAttribute(name, value)أخصر وأوضح في المشاريع الحديثة.
اعتمدت الشيفرات القديمة سابقاً على الدالة المطولة المهملة document.createEvent("CustomEvent") متبوعةً بـ initCustomEvent(). أما المعيار الحديث النظيف فهو الباني المباشر new CustomEvent(type, options).
مرّر البيانات المرافقة للحدث داخل الخاصية detail، واضبط الخيار bubbles: true إذا أردت صعود الحدث للأب الأعلى، ثم أطلقه فورياً عبر target.dispatchEvent(event).
const box = document.getElementById('out');
document.addEventListener('cart:add', (e) => {
box.textContent = e.detail.sku + ' x' + e.detail.qty;
});
const ev = new CustomEvent('cart:add', {
detail: { sku: 'JS-148', qty: 2 },
bubbles: true,
});
box.dispatchEvent(ev);ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس دوال الإنشاء في كائن المستند: تجميع القوائم عبر createDocumentFragment()، وبناء العناصر والنصوص الآمنة، وفهم createComment() وcreateAttribute()، وإطلاق الأحداث المخصصة عبر new CustomEvent(). الخطوة التالية: انتقل إلى درس تحريك عناصر الواجهة في DOM لبناء حركة بصرية سلسة متزامنة مع معدل تحديث الشاشة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DocumentFragment حاوية التجميع المؤقتة DocumentFragment
- حاوية خفيفة بالذاكرة (نوعها 11) تجمع العقد وتنقلها للشجرة الحية دفعة واحدة دون غلاف إضافي.
- للمراجعة
- 02 CustomEvent الحدث المخصص CustomEvent
- باني قياسي ينشئ أحداثاً مخصصة تحمل بيانات التطبيق داخل الخاصية detail للتواصل المرن بين المكونات.
- للمراجعة
- 03 Comment Node عقدة التعليق Comment
- عقدة غير مرئية على الصفحة (نوعها 8) تُنشأ لتعليم المواضع الهيكلية داخل شجرة المستند.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- نموذج كائن المستند الذي يوفر في جذره دوال بناء العناصر والنصوص والتعليقات والحاويات المؤقتة.
- للمراجعة
- 02 XSS XSS
- Cross-Site Scripting
- ثغرة حقن الشيفرات التي تمنعها العقد النصية المنشأة بـ createTextNode لأنها تعامل المدخلات كحروف فقط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أضف عنصراً رابعاً لمصفوفة items في محرر التجربة الأول وتحقق من ظهور 4 عناصر وبقاء طول الحاوية المؤقتة صفراً بعد الإلحاق.
-
غيّر قيمة qty من 2 إلى 5 داخل كائن detail في المحرر الثالث وتأكد من طباعة العدد المحدث فورياً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.