الوصول الى العقد و معلوماتها html dom

الوصول الى العقد html dom



عند استخدام لغة DOM ستتمكن من الوصول و استدعاء كل عقدة في صفحة HTML .




الوصول الى العقد


يمكنك الوصول الى العقدة من خلال 3 أنواع :

  1. من خلال استخدام الطريقة getElementById() .

  2. من خلال استخدام الطريقة getElementsByTagName() .

  3. من خلال استخدام شجرة العقد و ذلك باستخدام العلاقة بين العقد .





طريقة getElementById()


تعيد الطريقة getElementById() العنصر من خلال id معين .

التركيبة


node.getElementById("id");
		  

تحصل في الكود التالي نص innerHTML من الفقرة <p> من خلال id المسمى intro :
document.getElementById("intro");
		  

ملاحظة : لا تعمل طريقة getElementById() على لغة XML .




طريقة getElementsByTagName



تحصل طريقة getElementsByTagName على جميع العناصر من خلال اسم الوسم الخاص بهم .

التركيبة



node.getElementsByTagName("اسم الوسم");
		  

يعيد المثال التالي قائمة بالعقدة لجميع عناصر <p> في الصفحة :
document.getElementsByTagName("p");
		  

يعيد المثال السابق قائمة بالعقدة لجميع عناصر <p> والتي تم استدعائها من خلال id المسمى main :
document.getElementById("main").getElementsByTagName("p");
		  





القائمة العقدية


تعيد الطريقة getElementsByTagName() قائمة عقدية . القائمة العقدية هي مصفوفة العقد .

في المثال التالي سيتم اختيار جميع عقد <p> في قائمة عقدية .

مثال
x=document.getElementsByTagName("p");
		  

يمكن الوصول الى عقدة معينة من خلال رقم الترتيب الخاص بها ( بما أنها مصفوفة ) و للتمكن من الوصول الى العقدة الثانية من <p> يجب كتابة التالي :
y=x[1];
		  


ملاحظة : تبدء اول عقدة بالرقم 0 .

ستتعلم المزيد عن القوائم العقدية في دروس قائمة من هذا الدورة .




طول القائمة العقدية


تحدد خاصية الطول عدد العقد في قائمة العقد .

يمكنك إنشاء حلقة من خلال القائمة العقدة باستخدام خاصية الطول .

مثال
x=document.getElementsByTagName("p");
		  for (i=0;i<x.length;i++)
		  {
		  document.write(x[i].innerHTML);
		  document.write("<br />");
		  }


شرح المثال :

  1. الحصول على جميع عقد عنصر <p> .

  2. ستكون النتيجة قيمة عقدة النص لكل عنصر <p> .





علاقات العقد


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

شاهد بنية المثال التالي


<html>
		  <body>
		  <p>مرحباً بكم</p>
		  <div>
		  <p>لغة الدوم DOM مفيدة جداً</p>
		  <p>في هذا المثال سيتم إظهار العلاقة بين العقد</p>
		  </div>
		  </body>
		  </html>


في المثال السابق ان العنصر <p> الأبن الأول للعنصر <body> بينما العنصر <div> هو الابن الأخير لنفس العنصر . العقدة الأب للعنصرين <p> و <div> هو <body> بينما العنصر <div> هو العقدة الاب للعقدين <p> الموجودين ضمنه .

يمكن استخدام خاصية الابن الاول firstChild للوصول الى النص الموجود داخل العنصر .

مثال


<html>
		  <body>
		  <p id="intro">مرحباً بكم</p>
		  <script type="text/javascript">
		  x=document.getElementById("intro");
		  document.write(x.firstChild.nodeValue);

		  </script>
		  </body>
		  </html>





العقدة الجذرية


هناك نوعين من خاصيات الصفحة الخاصة التي تسمح بالوصول الى الوسوم :

  • document.documentElement : يعيد العقدة الجذرية للصفحة .

  • document.body : تقدم وصول مباشر لوسم <body> .





معلومات العقد html dom



تحتوي الخصائص nodeName و nodeValue و nodeType على معلومات عن العقد .



خصائص العقدة


يعتبر كل عقدة node هي كائن object في لغة HTML DOM .

تحتوي الكائنات على خصائص وطرق والتي يمكن الوصول اليها او التعديل عليها من خلال لغة الجافاسكربت JavaScript .

هناك ثلاثة خصائص مهمة في العقد هم

  • nodeName

  • nodeValue

  • nodeType




خاصية اسم العقدة nodeName


تحدد خاصية nodeName اسم العقدة .

  • تعتبر خاصية nodeName للقراءة فقط read-only .

  • اسم العقدة nodeName للعنصر هي نفسها اسم الوسم .

  • اسم العقدة nodeName للاحقة هي نفسها اسم اللاحقة .

  • اسم العقدة nodeName للنص هو دائماً نص .

  • اسم العقدة nodeName للصفحة هي نفسها اسم الصفحة .





خاصية nodeValue


تحدد خاصية nodeValue قيمة العقدة .

  • ان nodeValue لعقدة العنصر غير محدد .

  • ان nodeValue لعقدة نص هي نص نفسه .

  • ان nodeValue مع عقدة اللاحقة هي قيمة اللاحقة .





الحصول على قيمة العنصر


يسترجع المثال التالي قيمة عقدة النص من الوسم <"p id="intro> :

مثال
<html>
	  <body>
	  <p id="intro">مرحباً بكم</p>

	  <script type="text/javascript">

	  x=document.getElementById("intro");
	  document.write(x.firstChild.nodeValue);

	  </script>
	  </body>
	  </html>




خاصية nodeType


تعيد الخاصية nodeType نوع العقدة . يعتبر نوع العقدة nodeType للقراءة فقط .



أكثر العقد أهمية هي :
نوع العنصرنوع العقد
Element العنصر1
Attribute اللاحقة2
Text النص3
Comment التعليق8
Document الصفحة9


تعليقات