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

عند استخدام لغة 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> .