في JavaScript ، تتبع شجرة DOM الهيكل الهرمي الذي يحتوي على قائمة كبيرة من العقد. تبدأ البنية من العقدة الجذر (المستند) ثم تلحق بالعقد الأصلية والتابعة. من أجل الوصول إلى هذه العقد الفرعية ، تقدم JavaScript ' ChildNodes ' ملكية. تساعد هذه الخاصية المستخدمين على الوصول إلى كل أو عقدة فرعية معينة للعنصر الأصل المقترن.
يوضح هذا المنشور الهدف وعمل خاصية 'childNodes' لعنصر HTML DOM في JavaScript.
ما هي خاصية 'childNodes' لعنصر HTML DOM في JavaScript؟
ال ' ChildNodes 'هي خاصية للقراءة فقط تُرجع قائمة بجميع العقد الفرعية لعنصر ما في شكل كائن NodeList. يمكن أيضًا استخدام هذه الخاصية الخاصة للوصول إلى العقدة الفرعية المحددة للعنصر الأصل. تبدأ العقدة الفرعية من فهرس '0 (صفر)'. علاوة على ذلك ، تعتبر المسافات البيضاء والتعليقات والعقد النصية أيضًا عُقدًا فرعية.
بناء الجملة
العنصر
يُرجع بناء الجملة المعمم أعلاه كائن NodeList الذي يحتوي على عقد فرعية للعنصر المستهدف.
دعنا نستخدم التركيبات المحددة أعلاه عمليا.
كود HTML
أولاً ، ألق نظرة على كود HTML المذكور:
< شعبة بطاقة تعريف = 'Div' أسلوب = 'الحد: 2 بكسل أسود خالص ؛ الارتفاع: 200 بكسل ؛ العرض: 250 بكسل ؛ المساحة المتروكة: 10 بكسل' >< h2 > العنوان الأول h2 >
< h3 > العنوان الثاني h3 >
< ص > الفقرة الأولى ص >
< ص > الفقرة الثانية ص >
شعبة >
< ص بطاقة تعريف = 'ل' > ص >
في سطور الكود أعلاه:
- أضف ' 'مع المعرف' Div '، مصمم بمساعدة الخصائص المحددة (الحدود والارتفاع والعرض).
- ضمن عنصر '
' ، حدد عنوانين وفقرتين ، على التوالي.- أخيرًا ، ' 'العلامة يدمج فقرة فارغة مع معرف' الفقرة '.
ملحوظة: يتم النظر في رمز HTML المذكور في جميع أنحاء هذا المنشور.
مثال 1: تطبيق خاصية 'childNodes' للحصول على العدد الإجمالي للعقد الفرعية لعنصر معين
يستخدم هذا المثال الخاصيتين 'childNodes' و 'length' للحصول على العدد الإجمالي للعقد الفرعية الموجودة في العنصر الرئيسي المحدد.
كود جافا سكريبت
دعونا نتبع الكود المحدد:
< النصي >
const elem = document.getElementById ( 'Div' ) ؛
يترك عدد = elem.childNodes.length ؛
document.getElementById ( 'ل' ) .innerHTML = 'قيمة: ' + الأسطوانات ؛
النصي >في سطور التعليمات البرمجية أعلاه:
- يستخدم المتغير 'elem' عامل التشغيل ' getElementById () 'للوصول إلى العنصر الأصل الذي يكون معرفه' Div '.
- يستخدم المتغير 'num' العنصر ' ChildNodes ' و ' طول 'للحصول على عدد العقد الفرعية الموجودة في عنصر' 'الذي تم الوصول إليه.
- أخيرًا ، تجلب طريقة 'getElementById ()' الفقرة الفارغة المضمّنة عبر المعرّف 'الفقرة' لإلحاقها بقيمة المتغير 'num'.
انتاج |
الناتج يعني أن هناك إجمالي ' 9 'العقد الفرعية في عنصر'
'بما في ذلك المسافات البيضاء بين العناصر.مثال 2: تطبيق خاصية 'childNodes' للحصول على اسم عقدة فرعية معينة
يمكن أيضًا استخدام خاصية 'childNodes' مع خاصية 'nodeName' للحصول على اسم (عقدة) فرعية. دعونا نرى ذلك عمليا.
كود جافا سكريبت
انتقل من خلال الكود التالي:
< النصي >
const elem = document.getElementById ( 'Div' ) ؛
يترك عدد = elem.childNodes [ 1 ] .اسم العقدة؛
document.getElementById ( 'ل' ) .innerHTML = 'عنصر: ' + الأسطوانات ؛
النصي >هنا ، ' ChildNodes 'الخاصية' مرتبطة بـ ' اسم العقدة 'للحصول على اسم العقدة الفرعية المحددة بناءً على الفهرس الذي تم الوصول إليه ، أي' 1 '.
انتاج |
يعرض الإخراج اسم العقدة الفرعية ، أي عنصر 'H2' مقابل الفهرس المحدد.
مثال 3: تطبيق خاصية 'childNodes' لتغيير لون النص لعقدة فرعية معينة
يستخدم هذا المثال الخاصية التي تمت مناقشتها لتغيير لون الطفل المفهرس الهدف.
كود جافا سكريبت
ضع في اعتبارك الكود التالي:
< النصي >
document.getElementById ( 'Div' ) .childNodes [ 3 ] .style.color = 'أخضر' ؛
النصي >هنا ، ' getElementById () 'تجلب الطريقة العنصر الأصلي'
'عبر معرفه' Div 'والعقدة الفرعية الخاصة به الموضوعة في الفهرس المحدد عبر' ChildNodes '، على التوالي. بعد ذلك ، استخدم ' النمط. اللون 'لتغيير لون نص العقدة الفرعية التي تم الوصول إليها.انتاج |
يؤكد الإخراج أن لون نص العقدة الفرعية المحددة قد تم تغييره بشكل مناسب.
خاتمة
في JavaScript ، فإن ' ChildNodes ”تسترد الخاصية nodeList التي تحتوي على العقد الفرعية لعنصر HTML الهدف. يمكن الوصول إلى العقد الفرعية كلها مرة واحدة أو إلى العقدة المطلوبة عن طريق تحديد رقم الفهرس بخاصية 'childNodes'. تسمح هذه الخاصية بتنفيذ وظيفة JavaScript لأداء مهام خاصة على العقد الفرعية التي تم الوصول إليها. تناولت هذه المقالة بالتفصيل تطبيق خاصية 'childNodes' في JavaScript.
- ضمن عنصر '