JavaScript

Add elements

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

التاريخ

13 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1035

المواضيع

24
الشروحات chevron_left Add elements chevron_left JavaScript

Add elements

</> accessKey

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

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

Example
var elem = document.getElementById("txt");
      elem.accessKey = "t";

</> addEventListener

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

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

  • event : وهو نوع الحدث الذي تريد اضافته مثل (click, dblclick ) 
  • function : هي عبارة عن دالة تقوم بتحديدها ليتم تنفيذها عند قيام المستخدم بتنفيذ الحدث الذي قمت بتعيينه 
Syntax
addEventListener(event, function);
Example
function fun() {
document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to the  closeTag.com";

ملاحظة: لا تستخدم أي بادئة مثل "on" مع قيمة المعلمة. على سبيل المثال ، استخدم "click" مباشرة  بدلاً من استخدام "onclick".

</> appendChild

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


Syntax
parentNode.appendChild(childNode)

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

ar node = document.getElementById("myList2").lastChild;
  document.getElementById("myList1").appendChild(node);
Example
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
node.attributes
Length Example
var x = document.getElementById("myBtn").attributes.length;
Index Example
var x = document.getElementById("myBtn").attributes[1].name;

</> blur

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

Syntax
HTMLElementObject.blur()
Example
document.getElementById("myText").blur();
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.