شجرة العقد HTML DOM

سجين القدر

اخر تحديث :

عُقد HTML DOM

باستخدام DOM يعتبر كل عنصر في صفحات HTML هو عقدة node .

عُقد DOM

وفقاً للغة DOM ان كل عنصر في صفحات HTML هو عقدة node .

تستخدم DOM :

تعتبر الصفحة الكلية هي عقدة صفحات .

كل عنصر HTML هو عقدة عناصر .

ان النص الموجود في HTML هو عقدة نصوص .

كل لاحقة HTML هي عقدة لواحق .

التعليقات هي أيضاً عقدة تعليقات .

مثال DOM

انظر الى صفحة HTML التالية :

		  <html>
		  <head>

		  <title>DOM دورة</title>

		  </head>
		  <body>

		  <h1>أول درس DOM </h1>

		  <p>مرحباً بكم في المعهد العربي للبرمجة</p>

		  </body>
		  </html>

ان العقدة الجذرية في صفحة HTML هي <html> كما أن جميع العقد في هذه الصفحة موجودة داخل العقدة <html> .

تحتوي العقدة <html> على عقدتين فرعيتين هما <head> و <body> .

يحتوي عقدة <head> على عقدة <title> . و يحتوي عقدة <body> على عقدتي <h1> و <p> .

يتم تخزين النص دائماً في عقد النصوص

من الخطأ الشائع الاعتقاد بأن العقدة يجب أن تحتوي على نص . على أي حال يتم تخزين النص دائماً في عقد النصوص .

في المثال السابق <title>DOM دورة</title> , يحتوي عقدة العنصر <title> يحتوي على عقدة النص والتي تحتوي على القيمة "دورة DOM" .

لايعتبر "دورة DOM" قيمة في عنصر <title> . على أي حال يمكن الوصول الى عقدة النص في HTML DOM من خلال الخاصية innerHTML .

يمكنك دراسة المزيد عن innerHTML من خلال دروس قادمة .

الشجرة العقدية html dom

تظهر HTML DOM صفحة HTML على أنها شجرة عقد .

جميع العقد في الشجرة لديها علاقة مع بعضها البعض .

شجرة العقد

تظهر HTML DOM صفحة HTML على أنها شجرة عقد . تسمى بنية الشجرة شجرة العقد .

يمكن الوصول لجميع العقد من خلال الشجرة . يمكن التعديل على المحتوى أو حذفه أو إنشاء عناصر جديدة أيضاً .

تظهر شجرة العقد مجموعة العقد الموجودة في الصفحة و العلاقة بينهم . تبدء الشجرة من العقدة الجذرية وبعض النصوص في آخر درجات الشجرة .

علاقة العقد الآباء والأبناء و الأخوات

تحتوي عقدة الشجرة على علاقة تسلسل هرمي مع بعضهم البعض .

يستخدم مصطلح الآباء والأبناء و الأخوات لشرح العلاقات بين العقد . عقدد الآباء تحتوي على أبناء . و بفس المستوى تسمى الأبناء بالأشقاء ( أخوة و أخوات ) .

في عقدة الشجرة , أول عقدة هي العقدة الجذرية .

كل عقدة ماعدا الجذرية تحتوي أب واحد على الأقل .

يمكن أن تحتوي العقدة على أي عدد من الأبناء .

تسمى العقدة التي لا تحتوي على أبناء بالعقدة الوحيدة .

الأشقاء هم عقد تحتوي على نفس الأبوين .

تصور الصورة التالية جزء من شجرة العقد و العلاقة بين العقد أيضاً .

شاهد المثال التالي

<html>
		  <head>
		  <title>DOM دورة</title>

		  </head>
		  <body>

		  <h1>أول درس DOM </h1>
		  <p>مرحباً بكم في المعهد العربي للبرمجة</p>

		  </body>
		  </html>

من خلال مثال HTML السابق

عقدة <html> لا تحتوي على عقدة الأب أي إنها العقدة الجذريية .

ان العقدة <html> هي العقدة الأب للعقد <head> و <body>.

ان العقدة <p> هي العقدة الأب للنص "مرحباً بكم في المعهد العربي للبرمجة" .

بالاضافة إلى

لدى العقدة <html> عقدتين أبناء هم <head> و <body>.

ان العقدة <head> هو العقدة الأب للعقدة <title> .

لدى العقدة <title> عقدة نص كإبن .

ان العقد <h1> و <p> هم أشقاء و الاثنين هم أخوة للقعدة الأب <body> .

الولد الأول و الولد الأخير

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

ان العنصر <head> هو الابن الأول للعنصر <html> و العنصر <body> هو الابن الأخير له .

ان العنصر <h1> هو الابن الأول للعنصر <body> و العنصر <p> هو الابن الأخير له .

تعديل المقال

الأقسام Html dom

مقالات قد تهمك

تعليقات

إرسال تعليق