الوصول الى العقد html dom
عند استخدام لغة DOM ستتمكن من الوصول و استدعاء كل عقدة في صفحة HTML .
الوصول الى العقد
يمكنك الوصول الى العقدة من خلال 3 أنواع :
- من خلال استخدام الطريقة
getElementById()
. - من خلال استخدام الطريقة
getElementsByTagName()
. - من خلال استخدام شجرة العقد و ذلك باستخدام العلاقة بين العقد .
طريقة 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 />"); }
شرح المثال :
- الحصول على جميع عقد عنصر <p> .
- ستكون النتيجة قيمة عقدة النص لكل عنصر <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 |