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

By · ·


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




ليست هناك تعليقات:

إرسال تعليق