JavaScript DOM Navigation
التنقل داخل شجرة DOM في لغة جافا سكريبت
في هذا الدرس سوف تتعلم كيفية التنقل بين أفرع الشجرة بكل سهولة وكيفية التنقل بين parent الأب إلي children الأبناء وبين sibling الأخوة في لغة جافا سكريبت.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
