Add elements
في هذا الدرس سوف نتعرف علي طريقة اضافة بعض الخصائص والدوال الي عناصر ال HTML باستخدام لغة ال java script
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left Add elements chevron_left JavaScript
Add elements
</> accessKey
accessKey : هو مفتاح اختصار يتم تحديده لعنصر معين ، لذلك بالضغط على accessKey ، ينتقل عنصر التحكم تلقائيًا إلى عنصر المحدد.
accessKey : يجب استخدامها بعناية ، لأنها قد تتعارض مع روابط مفاتيح أخرى موجودة في المتصفح.
</> 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()
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
