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

سجين القدر

اخر تحديث :

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

تحدد الخصائص والطرق على الواجهة البرمجية للغة 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 .

تعديل المقال

الأقسام Html dom

تعلم البرمجة مجانا