الخصائص والطرق HTML DOM

By · ·


تحدد الخصائص والطرق على الواجهة البرمجية للغة HTML DOM .



الواجهة البرمجية


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

تحدد الواجهة البرمجية للغة DOM الخصائص والطرق المعيارية .

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

تحدد الطريقة كيفية فعل الشيء مثل حذف العقدة .



الخصائص


بعض خصائص لغة DOM
  1. x.innerHTML : قيمة النص للكائن x .
  2. x.nodeName : اسم الكائن x .
  3. x.nodeValue : قيمة الكائن x .
  4. x.parentNode : العقدة الأب للكائن x .
  5. x.childNodes : العقدة الإبن للكائن x .
  6. x.attributes : عقد اللواحق للكائن x .

ملاحظة : في القائمة السابقة , العنصر x هو عقدة كائن .



الطرق


بعض طرق لغة DOM
  1. x.getElementById(id) : احصل على العناصر من خلال id الخاص بها .
  2. x.getElementsByTagName(name) : احصل على جميع العناصر من خلال اسم الوسم الخاص بهم .
  3. x.appendChild(node) : إدراج عقدة الإبن الى x .
  4. 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 .

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

إرسال تعليق