في هذا الدرس 6تصفّح المواضيع
زوّدت المتصفحات كائن document بخصائص جاهزة ومجموعات حية من نوع HTMLCollection تمنحك وصولاً فورياً لأقسام الصفحة الكبرى وعناصرها المتكررة—مثل document.head وdocument.body وdocument.images وdocument.links وdocument.forms وdocument.scripts—دون الحاجة لكتابة محددات استعلام في الفحوصات الشاملة للصفحة.
تشير خاصية document.documentElement إلى العنصر الجذر <html>، وتشير document.head إلى قسم رأس الصفحة <head>، وdocument.body إلى جسم المستند <body>، بينما تتيح document.title قراءة وتحديث نص عنوان تبويب المتصفح بأمان:
| الخاصية المدمجة | نوع القيمة المسترجعة | العناصر المستهدفة في المستند |
|---|---|---|
document.documentElement | عنصر مفرد Element | العنصر الجذر <html> لضبط سمات الوضع اللوني واللغة |
document.head / document.body | عنصر مفرد Element | قسم رأس الصفحة <head> وحاوية الجسم <body> |
document.title | نص عادي string | قراءة أو تغيير عنوان التبويب داخل <title> |
document.images | مجموعة حية HTMLCollection | جميع عناصر الصور <img> بترتيب ظهورها |
document.links | مجموعة حية HTMLCollection | جميع عناصر <a> و<area> المزودة بسمة href |
document.forms / document.scripts | مجموعة حية HTMLCollection | جميع عناصر النماذج <form> والسكربتات <script> |
تعيد الخاصية document.images مجموعة حية تضم كل عنصر <img> في الصفحة. تستخدمها أدوات فحص الجودة وسهولة الوصول للمرور بحلقة for...of أو الفهرس الرقمي لإحصاء الصور وفحص مساراتها والتأكد من وجود النص البديل alt.
function auditImages() {
const imgs = document.images;
let missingAlt = 0;
for (const img of imgs) {
if (!img.alt) missingAlt += 1;
}
const out = document.getElementById('img-audit');
out.textContent = 'Images: ' + imgs.length + ' | Missing alt: ' + missingAlt;
}تجمع document.links كل رابط نشط يمتلك سمة href، مما يجعلها مثالية لفحص الروابط الخارجية أو رصد البروتوكولات الخطرة مثل javascript: ومنعها. وتوفر document.forms وصولاً منظماً لجميع نماذج الصفحة عبر الفهرس الرقمي أو اسم النموذج ومعرفه.
function inspectPageAssets() {
const linkCount = document.links.length;
const firstForm = document.forms['loginForm'];
const out = document.getElementById('asset-out');
out.textContent = 'Active links: ' + linkCount + ' | Form id: ' + firstForm.id;
}تعيد الخاصية document.scripts مجموعة حية تشمل جميع وسوم <script> في الصفحة سواء كانت ملفات خارجية تمتلك src أو سكربتات مضمنة، بينما تحصي document.embeds عناصر التضمين <embed>. وتُفيد في أدوات التشخيص للتحقق من تحميل الحزم ومراجعة مصادرها.
تشبه مجموعة HTMLCollection المصفوفة لامتلاكها .length وفهارس رقمية، لكن Array.isArray(document.links) ترجع false! لذلك فإن استدعاء دوال المصفوفات مثل .slice() أو .reverse() عليها مباشرة يطلق خطأ TypeError. يمنحك استدعاء Array.from(document.links) نسخة مصفوفة حقيقية ثابتة تدعم جميع دوال المصفوفات وتحميك من الحلقات اللانهائية أثناء تعديل الشجرة.
function takeTopTwoLinks() {
const raw = document.links;
const arr = Array.from(raw).slice(0, 2);
const labels = [];
arr.forEach(function (a) { labels.push(a.textContent); });
const out = document.getElementById('arr-out');
out.textContent = 'isArray: ' + Array.isArray(arr) + ' -> ' + labels.join(', ');
}ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
استكشفت خصائص المستند الفورية (head وtitle وbody) وفحصت المجموعات الحية للصور والروابط والنماذج والسكربتات وحولتها لمصفوفات حقيقية عبر Array.from(). الخطوة التالية: انتقل إلى الفصل العاشر لإتقان هندسة أحداث DOM التفاعلية وكائنات الأحداث باحترافية!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTMLCollection مجموعة العناصر الحية HTMLCollection
- قائمة عناصر حية شبيهة بالمصفوفة توفرها خصائص مدمجة مثل document.images وdocument.links وdocument.forms.
- للمراجعة
- 02 document.title خاصية عنوان الصفحة document.title
- خاصية نصية في كائن المستند تقرأ أو تحدّث عنوان الصفحة الظاهر في تبويب المتصفح كنص آمن.
- للمراجعة
- 03 document.links مجموعة الروابط document.links
- مجموعة حية تضم جميع عناصر الروابط <a> و<area> التي تمتلك سمة href داخل المستند.
- للمراجعة
- 04 Array.from() دالة التحويل Array.from()
- دالة ثابتة مدمجة تحول المجموعات الشبيهة بالمصفوفة مثل HTMLCollection إلى مصفوفة JavaScript حقيقية وثابتة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- نموذج كائن المستند الشجري الذي يتيح الوصول لمجموعات العناصر المدمجة وفحصها برمجياً.
- للمراجعة
- 02 CSP CSP
- Content Security Policy
- سياسة أمان المحتوى التي تقيد مصادر تحميل السكربتات وتتكامل مع فحص document.scripts.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال فحص الصور وانقر الزر للمرور على مجموعة document.images وإحصاء الصور التي تفتقر للنص البديل.
-
افتح مثال تحويل الروابط وانقر الزر لاقتطاع أول رابطين عبر .slice(0, 2) بعد التحويل بالدالة Array.from().
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.