Html dom

تغيير عناصر HTML و الإحداث HTML DOM

سجين القدر
اخر تحديث :


يمكن تغيير عناصر HTML من خلال لغة JavaScript و HTML DOM و الأحداث .


 تغيير عناصر HTML بواسطة HTML DOM


تغير لغة JavaScript و HTML DOM المحتوى الداخلي و الواحق في صفحة HTML .

يغير المثال التالي خلفية الصفحة للعنصر <body> .

مثال
<html>
		  <body>
		  <script type="text/javascript">
		  document.body.bgColor="Orange";

		  </script>
		  </body>
		  </html>



تغيير النص لعناصر HTML – innerHTML


أسهل طريقة لتعديل محتوى العناصر من خلال استخدام خاصية innerHTML .

يغير المثال التالي النص للعنصر <p>

مثال
<html>
		  <body>
		  <p id="p1">مرحباً بكم</p>

		  <script type="text/javascript">

		  document.getElementById("p1").innerHTML="تم تغيير النص الأصلي";

		  </script>
		  </body>
		  </html>




تغيير عناصر HTML من خلال الأحداث


تسمح لك الأحداث باستدعاء الأكواد عند حدوث حدث معين .

يتم توليد الأحداث من خلال المتصفحات عند ضغط المستخدم على العنصر أو عند تحديث الصفحة أو عند ارسال نموذج معين .

يمكنك قراءة المزيد عن الأحداث في الدرس التالي .

يغير المثال التالي خلفية لون الصفحة للوسم <body> عند الضغط على زر الارسال :
<html>
		  <body>
		  <input type="button" onclick="document.body.bgColor='lavender';"

		  value="تغيير خلفية الصفحة" />

		  </body>
		  </html>




تغيير نص العنصر من خلال الكود الوظيفي Function

يستخدم المثال التالي الكود والوظيفي لتغير النص الموجود في العنصر <p> عند الضغط على الزر :

مثال
<html>
		  <head>
		  <script type="text/javascript">
		  function ChangeText()
		  {
		  document.getElementById("p1").innerHTML="النص الجديد المعدل";
		  }

		  </script>
		  </head>
		  <body>

		  <p id="p1">مرحباً بكم</p>

		  <input type="button" onclick="ChangeText()" value="تغيير النص" />

		  </body>
		  </html>




استخدام كائن التصميم HTML DOM


يقدم كائن التصميم لكل عنصر HTML تصميمه الخاص .

يستخدم المثال التالي الكود الوظيفي function لتغيير تصميم العنصر <body> عند الضغط على الزر :

مثال
<html>
		  <head>
		  <script type="text/javascript">

		  function ChangeBackground()
		  {
		  document.body.style.backgroundColor="lavender";
		  }

		  </script>
		  </head>
		  <body>

		  <input type="button" onclick="ChangeBackground()"value="تغيير خلفية الصفحة" />

		  </body>
		  </html>



تغيير اللون و الخط للعناصر في HTML DOM


يستخدم المثال التالي الكود الوظيفي function لتغيير تصميم العنصر <p> عند الضغط على الزر :

مثال
<html>
		  <head>
		  <script type="text/javascript">

		  function ChangeStyle()
		  {
		  document.getElementById("p1").style.color="blue";
		  document.getElementById("p1").style.fontFamily="Tahoma";
		  }

		  </script>
		  </head>
		  <body>

		  <p id="p1">مرحباً بكم</p>
		  <input type="button" onclick="ChangeStyle()" value="تغيير التصميم" />

		  </body>
		  </html>


الأحداث HTML DOM



إن الأحداث عبارة عن أفعال يتم إنشائها من خلال الجافاسكربت JavaScript .



باستخدام الجافاسكربت يمكنك إنشاء صفحات انترنت ديناميكية علماً أن الأحداث عبارة عن أفعال يتم إنشائها من خلال الجافاسكربت JavaScript .

كل عنصر في HTML يمكن ادارج أحداث معه في الجافاسكربت . على سبيل المثال يمكن استخدام الحدث onClick على عنصر الزر ليشيربأن كود وظيفي سيتم استخدامه عند ضغط المستخدم على الزر . يمكن تعريف الأحداث في عناصر HTML .

أمثلة عن الأحداث 

  • عند الضغط بالماوس .

  • عند فتح صفحة أو صورة .

  • عند تمرير الماوس فوق نقطة معينة في صفحة الويب .

  • عند اختيار حقل نص في نماذج HTML .

  • عند الضغط على زر ارسال النموذج .

  • عند الضغط بزر لوحة الوسوم .

ملاحظة : عادة تستخدم الأحداث مع الأكواد الوظيفية أي أن الأكواد الوظيفية لن تعمل قبل حدوث الحدث .



استخدام الأحداث onLoad و onUnload


تحدث هذه الأحداث عند دخول المستخدم أو خروجه من صفحة الويب .

يستخدم الحدث onLoad عادة لفحص نوع متصفح المستخدم واصدار المتصفح وتحميل النسخة المناسبة لصفحة الويب التي تعتمد عليها المعلومات .

تتعامل كلاً من onLoad و onUnloadمع كوكيز المتصفح cookie التي تبقى في المتصفح عند دخول وخروج المستخدم من الصفحة . على سبيل المثال عند ظهور نافذة تسأل عن اسم المستخدم في الصفحة سيحفظ الاسم في ملف التأريخات و عند الدخول مرة أخرى على الموقع نفسه سترى مباشرة أنه سجل الدخول بدون طلب تسجيل الدخول " مرحباً بك .... " .



استخدام الأحداث onFocus و onBlur و onChange


تستخدم عادة الأحداث onFocus و onBlur و onChange مع تفعيل حقول النماذج forms .

في المثال التالي استخدمنا الحدث onChange وسيتم استدعاء الكود الوظيفي checkEmail() في حال قام المستخدم بتغيير محتوى الحقل .
ضع بريدك هنا :
		  <input type="text" size="30" id="email" onchange="checkEmail()" />




ملخص عام حول HTML DOM


لقد تعلمت لغة HTML DOM


لقد تعلمت في هذا الدورة استخدام HTML DOM لجعل صفحات موقعك أكثر تفاعلية و حركية .

لقد تعلمت كيف التعديل على عناصر HTML و الاستجابة للأوامر المختلفة .



مالتالي بعد لغة HTML DOM


تستخدم لغة HTML للتعامل مع المستخدمين على المتصفح بينما لغات ASP / PHP تتعامل مع الملفات على السيرفر .

باستخدام لغات ASP / PHP يمكنك تعديل أو تغيير أو إضافة محتوى الصفحة بسهولة و الاستجابة الى نماذج HTML و تعديل البيانات في قواعد البيانات وإظهار النتيجة على المتصفح . سيصبح التعديل على صفحات الانترنت أكثر فائدة مع المستخدمين .

بما أن ملفات ASP / PHP تعطي النتيجة على شكل نص في صفحات HTML لذلك يمكن إظهار النتيجة على المتصفح لديك .

إن أردت البدء بتعلم لغة PHP , يمكنك زيارة .

إن أردت البدء بتعلم لغة ASP , يمكنك زيارة دورة ASP .

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات