تحدد الخصائص والطرق على الواجهة البرمجية للغة HTML DOM .
الواجهة البرمجية
بلغة DOM تتألف الصفحة من خلال مجموعة عقد . يمكن استخدام العقدة باستخدام الجافاسكربت JavaScript أو من خلال لغات برمجية أخرى . ولكن في هذا الدورة سنستخدم الجافاسكربت JavaScript .
تحدد الواجهة البرمجية للغة DOM الخصائص والطرق المعيارية .
تحدد الخصيصة نوع الشي المراد ذكره مثل اسم العقدة .
تحدد الطريقة كيفية فعل الشيء مثل حذف العقدة .
الخصائص
بعض خصائص لغة DOM
x.innerHTML
: قيمة النص للكائن x .x.nodeName
: اسم الكائن x .x.nodeValue
: قيمة الكائن x .x.parentNode
: العقدة الأب للكائن x .x.childNodes
: العقدة الإبن للكائن x .x.attributes
: عقد اللواحق للكائن x .
ملاحظة : في القائمة السابقة , العنصر x هو عقدة كائن .
الطرق
بعض طرق لغة DOM
x.getElementById(id)
: احصل على العناصر من خلال id الخاص بها .x.getElementsByTagName(name)
: احصل على جميع العناصر من خلال اسم الوسم الخاص بهم .x.appendChild(node)
: إدراج عقدة الإبن الى x .x.removeChild(node)
: إزالة عقدة الابن من x .
ملاحظة : في القائمة السابقة , العنصر x هو عقدة كائن .
خاصية innerHTML
أسهل طريقة للحصول على أو تعديل محتوى العنصر هو استخدام خاصية innerHTML .
لاتعتبر خاصية innerHTML جزء من اختصاص W3C DOM الا أنها مدعومة من خلال جميع المتصفحات .
تعتبر خاصية innerHTML مفيدة عند استعادة أو استبدال محتوى عناصر HTML متضمناً عناصر <html> و <body> كما يمكن أن تستخدم لإظهار مصدر الصفحة التي يمكن التعديل عليها بشكل ديناميكي أو نشط .
مثال
تحصل في الكود التالي نص innerHTML من الفقرة <p> من خلال id المسمى intro :
<html> <body> <p id="intro">مرحباً بكم في المعهد العربي للبرمجة</p> <script type="text/javascript"> txt=document.getElementById("intro").innerHTML; document.write("<p>النص من خلال الاي بي المستخدم هو : " + txt + "</p>"); </script> </body> </html>
في المثال السابق getElementById هي طريقة بينما innerHTML هي خاصية .
childNodes و nodeValue
يمكن أيضاً استخدام childNodes و nodeValueللحصول على محتوى العناصر .
يحصل الكود التالي على القيمة الموجودة ضمن العنصر <p> من خلال id المسمى intro .
مثال
<html> <body> <p id="intro">مرحباً بكم في المعهد العربي للبرمجة</p> <script type="text/javascript"> txt=document.getElementById("intro").childNodes[0].nodeValue; document.write("<p>النص من خلال الاي بي المستخدم هو : " + txt + "</p>"); </script> </body> </html>
في المثال السابق getElementById هي طريقة بينما childNodes و nodeValueهي خاصية .
في هذا الدورة غالباً ماسنقوم باستخدام الخاصية innerHTML . ولكن باستخدام الطرق السابقة ستتمكن من فهم بنية الشجرة للغة DOM و التعامل مع ملفات XML .
ليست هناك تعليقات:
إرسال تعليق