JavaScript

JavaScript DOM Navigation
التنقل داخل شجرة DOM في لغة جافا سكريبت

في هذا الدرس سوف تتعلم كيفية التنقل بين أفرع الشجرة بكل سهولة وكيفية التنقل بين parent الأب إلي children الأبناء وبين sibling الأخوة في لغة جافا سكريبت.

التاريخ

11 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1275

المواضيع

24
الشروحات chevron_left JavaScript DOM Navigation chevron_left JavaScript

JavaScript DOM Navigation
التنقل داخل شجرة DOM في لغة جافا سكريبت

</> JavaScript DOM Navigation
التنقل داخل شجرة DOM في لغة جافا سكريبت

شجرة HTML DOM تتكون من أفرع رئيسية وأفرع فرعية وجافا سكريبت تتيح التنقل عن طريق node relationships العلاقات بين أفرع الشجرة مثل التنقل من الأب إلي الابن أو العكس من الأبن إلي الأب وأيضا يمكن التنقل بين أفرع الشجرة الأخوة فرعين أو أكثر من أب واحد.


JavaScript node:

    في لغة JavaScript شجرة DOM تتكون من كائنات كل كائن في الشجرة يسمي node وتمكننا لغة جافا سكريبت من التنقل بسهولة بين nodes.

    • كل element في صفحة HTML عبارة عن node.
    • مستند HTML عبارة عن node.
    • النص الموجود بداخل أي عنصر هو عبارة عن text node.
    • جميع HTML comments عبارة عن comments nodes.
    • جميع attributes الخصائص عبارة عن attributes nodes. 
    • جميع كائنات nodes يمكن أن يتم تحديثها أو يمكن حذفها داخل شجرة DOM.
    • في لغة JavaScript يمكن إضافة node جديدة داخل شجرة DOM.

    </> JavaScript node relationships
    علاقات كائنات node في لغة JavaScript

    كائنات nodes الموجودة في شجرة DOM في لغة JavaScript هي عبارة عن علاقة هرمية تتكون هذه العلاقة من ثلاثة إركان رئيسية [الأب - الأبناء - الأخوة].


    يجب التركيز علي هذه المصطلحات لأنها سوف تستخدم دائماً في التعامل مع شجرة DOM:

    • parent الأب هو فرع في الشجرة له أبناء ومن الممكن أن يكون متفرع من أب أخر.
    • children الأبناء مجموعة عناصر متفرعة من أب واحد.
    • sibling الأخ هي عناصر مجاورة متفرعة من أب واحد وعلي نفس المستوي.
    • root أكبر أب في الشجرة هو كائن ليس له أب.
    • one parent كل node لها أب واحد.
    JavaScript node relationships

    جميع العناصر في هذه الصفحة هي عبارة عن nodes وهي في الخلفية عبارة عن شجرة وكل عنصر له علاقة هرمية.

    <html>
    
      <head>
        <title>JavaScript node relationships</title>
      </head>
    
      <body>
        <h1>JavaScript node relationships</h1>
        <p>from CloseTag node relationships</p>
      </body>
    
    </html>

    من المثال السابق:

    • عنصر <html> هو عبارة عن root node.
    • عنصر <html> ليس له parent أب.
    • عنصر <html> هو parent أب لكل من عنصر <head> وعنصر <body>.
    • عنصر <head> هو first child أول أبن لعنصر  <html>.
    • عنصر <body> هو last child أخر أبن لعنصر <html>.
    • عنصر <head> له child أبن واحد فقط وهو عنصر <title>.
    • عنصر <title> له child أبن واحد وهو text node بداخله "JavaScript node relationships".
    • عنصر <body> لها عدد 2 children ابنين وهم عنصر <h1> وعنصر <p>.
    • عنصر <h1> لها child ابن واحد فقط وهو JavaScript node relationships".
    • عنصر <p> لها child واحد وهو "from CloseTag node relationships".
    • عنصر <h1> وعنصر <p> هم siblings أخوة متفرعين من أب واحد وهو عنصر <body>.

    </> JavaScript navigation methods
    دوال التنقل داخل شجرة DOM في لغة جافا سكريبت

    • parentNode هي دالة للقراءة فقط وظيفتها إرجاء parent الأب لكائن node معين من شجرة DOM tree.
    • childNodes[nodenumber] هي دالة للقراءة فقط وظيفتها إرجاء child محدد بناء علي رقمة وسط العناصر المتفرعة من هذا parent الأب الأب من شجرة DOM tree.
    • firstChild هي دالة للقراءة فقط وظيفتها إرجاء أول child أبن داخل هذا parent الأب الأب من شجرة DOM tree.
    • lastChild هي دالة للقراءة فقط وظيفتها إرجاء أخر child أبن داخل هذا parent الأب الأب من شجرة DOM tree.
    • nextSibling هي دالة للقراءة فقط وظيفتها إرجاء sibling الأخ التالي المتفرع من نفس الأب parent من شجرة DOM tree.
    • previousSibling هي دالة للقراءة فقط وظيفتها إرجاء sibling الأخ السابق المتفرع من نفس الأب parent من شجرة DOM tree.
    معلومات تهمك
    • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات

    لديك استفسار ؟

    يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.