انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 138
دورة جافا سكريبت

Add elements

في هذا الدرس سوف نتعرف علي طريقة اضافة بعض الخصائص والدوال الي عناصر ال HTML باستخدام لغة ال java script

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,753
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

accessKey

accessKey : هو مفتاح اختصار يتم تحديده لعنصر معين ، لذلك بالضغط على accessKey  ، ينتقل عنصر التحكم تلقائيًا إلى عنصر المحدد.

accessKey : يجب استخدامها بعناية ، لأنها قد تتعارض مع روابط مفاتيح أخرى موجودة في المتصفح.

Example

HTML 
var elem = document.getElementById("txt");
      elem.accessKey = "t";
جرّب بنفسك

addEventListener

  • ( )addEventListener : هي عبارة عن دالة تستخدم في اضافة حدث event الي عنصر معين 
  • تعتبر الأحداث events جزء أساسي ومهم في لغة الجافا سكريبت
  •  تستجيب صفحة الويب للأحداث التي يقوم بها المستخدم 
  • الاحداث يمكن أن تكون تم انشائها بواسطة المستخدم أو بواسطة API معين 
  • ( )addEventlistiner هي عبارة عن دالة built-in مبنية بداخل لغة ال java script 
  • يمكننا إضافة اكثر من حدث الي عنصر معين بدون الغاء احداث كانت موجودة من قبل مرتبطة بهذا العنصر 

- يتم تمرير عنصرين الي دالة ( )addEventListener  وهما : 

  • event : وهو نوع الحدث الذي تريد اضافته مثل (click, dblclick ) 
  • function : هي عبارة عن دالة تقوم بتحديدها ليتم تنفيذها عند قيام المستخدم بتنفيذ الحدث الذي قمت بتعيينه 

Syntax

HTML 
addEventListener(event, function);

Example

HTML 
function fun() {
document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to the  closeTag.com";
جرّب بنفسك

appendChild

appendChild () هي دالة لواجهة Node في JavaScript. حيث أن دالة appendChild () تمكننا من إضافة عقدة Node إلى نهاية قائمة العقد الفرعية الخاصة بالعقدة الأصلية المحددة.



Syntax

HTML 
parentNode.appendChild(childNode)

في المثال التالي نقوم بتخزين اخر عنصر من عناصر القائمة الثانية في متغير يسمي node عن طريق استخدام خاصية "lastChild" ثم بعد ذلك نقوم بنقل هذا العنصر الي القائمة الأولي عن طريق دالة "appendChild "

HTML 
ar node = document.getElementById("myList2").lastChild;
  document.getElementById("myList1").appendChild(node);
جرّب بنفسك

Example

HTML 
var node = document.createElement("LI");  
            var textnode =   
                document.createTextNode("C#");  
            node.appendChild(textnode);  
            document.getElementById("languages").appendChild(node);
جرّب بنفسك

attributes

  • attributes  : هي عبارة عن خاصية تمكننا من الوصول الي الخصاص التي تم اضافتها الي عنصر معين 
  • يمكننا الوصول الي خصائص عنصر معين عن طريق الفهرس index 
  • يمكننا معرفة عدد ال attributes الموجودة بداخل عنصر معين عن طريق استخدام الخاصية length مع الخاصية attribute 

Syntax

HTML 
node.attributes

Length Example

HTML 
var x = document.getElementById("myBtn").attributes.length;
جرّب بنفسك

Index Example

HTML 
var x = document.getElementById("myBtn").attributes[1].name;
جرّب بنفسك

blur

تستخدم الدالة ( )blur في أزالة التركيز من علي عنصر معين 

Syntax

HTML 
HTMLElementObject.blur()

Example

HTML 
document.getElementById("myText").blur();
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…