في هذا الدرس 4تصفّح المواضيع
تُعد element.nextElementSibling الخاصية العملية الحديثة الأكثر استخداماً في التنقل الأفقي الأمامي؛ فهي خاصية للقراءة فقط (بدون أقواس) تتخطى تلقائياً جميع عقد المسافات النصية #text والتعليقات لترجع مباشرةً أول عنصر HTML شقيق تالٍ داخل نفس الأب، أو null إن لم يوجد.
لاحظ ثبات وموثوقية nextElementSibling التامة سواء ضُغط ملف HTML في سطر واحد أو نُسّق في عدة أسطر مع تعليقات توضيحية:
| طريقة تنسيق كود HTML | نتيجة item1.nextSibling | نتيجة item1.nextElementSibling |
|---|---|---|
| متلاصق في سطر واحد | العنصر <li>2</li> | العنصر <li>2</li> |
| منسق بأسطر ومسافات بادئة | عقدة المسافة النصية #text | العنصر <li>2</li> بثبات تام |
| يفصل بينهما تعليق HTML | عقدة التعليق #comment | العنصر <li>2</li> بثبات تام |
const first = document.getElementById('q-item');
const out = document.getElementById('compare-out');
out.textContent =
'nextSibling: ' + first.nextSibling.nodeName +
' | nextElementSibling: ' + first.nextElementSibling.tagName +
' (' + first.nextElementSibling.textContent + ')';من أجمل التطبيقات الواقعية للخاصية nextElementSibling بناء مكون الأسئلة الشائعة (الأكورديون): حيث يتبع كل زر سؤال <button> عنصرُ الإجابة الشقيق مباشرةً <div hidden>؛ وعند نقر الزر نعكس خاصية الإخفاء panel.hidden على btn.nextElementSibling مع تحديث aria-expanded لقارئات الشاشة.
const faq = document.getElementById('faq-box');
faq.addEventListener('click', function (e) {
const btn = e.target.closest('button.faq-q');
if (!btn) return;
const panel = btn.nextElementSibling;
if (!panel) return;
panel.hidden = !panel.hidden;
btn.setAttribute('aria-expanded', String(!panel.hidden));
});عندما يكون العنصر الحالي هو آخر عنصر فعلي lastElementChild داخل أبيه — حتى لو تبعته مسافات فارغة أو تعليقات قبل وسم الإغلاق — فإن قراءة el.nextElementSibling تُرجع null.
وفي عروض الشرائح والتبويبات التفاعلية، تتيح العبارة الذكية current.nextElementSibling || container.firstElementChild العودة التلقائية السلسة إلى الشريحة الأولى فور الوصول للنهاية!
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس خاصية nextElementSibling للقفز المباشر نحو العنصر الشقيق التالي، وأثبتّ مناعتها التامة ضد المسافات والتعليقات مقارنةً بـ nextSibling، وبنيت أكورديون أسئلة متوافقاً مع إمكانية الوصول، وعالجت نهاية القائمة بمرونة. الخطوة التالية: اختتم الفصل الحادي عشر بدرس «خاصية العنصر الشقيق السابق previousElementSibling» والجدول المرجعي الشامل للتنقل.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 element.nextElementSibling خاصية العنصر التالي nextElementSibling
- خاصية للقراءة فقط ترجع أول عنصر HTML شقيق يلي العقدة الحالية متخطيةً النصوص والتعليقات.
- للمراجعة
- 02 Accordion Pattern نمط لوحات الأكورديون التفاعلية
- وضع زر العنوان متبوعاً مباشرة بلوحة المحتوى القابلة للطي والفتح عبر خاصية nextElementSibling.
- للمراجعة
- 03 Circular Fallback Wrap الالتفاف الدائري للشرائح
- توظيف المعامل المنطقي OR للعودة تلقائياً لأول عنصر عند وصول nextElementSibling إلى القيمة null.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FAQ FAQ
- Frequently Asked Questions
- قسم الأسئلة المتكررة القابل للفتح والطي عبر الانتقال من زر السؤال إلى لوحة الإجابة التالية.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- معيار إمكانية الوصول الذي يتيح سمة aria-expanded لإعلان حالة الفتح والإغلاق.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
شغّل المثال الأول في المحرر ولاحظ وقوف nextSibling عند المسافة النصية بينما تصل nextElementSibling للفقرة مباشرةً.
-
انقر زري السؤالين في مثال الأكورديون لفتح وطي لوحة الإجابة الشقيقة التالية لكل زر.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.