في هذا الدرس 7تصفّح المواضيع
يجب عليك عند التعامل مع صفحة HTML بلغة جافا سكريبت عن طريق DOM أن تحدد ما هو العنصر الذي تريد أن تتعامل معه لإجراء أي تعديلات علية أو حذف فيجب أولاً عند البدء في استخدام DOM أن تتعلم كفية البحث عن العناصر داخل DOM tree الشجرة.
يمكنك البحث علي العناصر داخل شجرة DOM بستة طرق مختلفة:
- I D name البحث عن عنصر واحد فقط له ID.
- class name البحث عن مجموعة عناصر تحمل class واحد.
- tag name البحث عن مجموعة عناصر تحمل اسم tag واحد.
- name البحث عن مجموعة عناصر تحمل اسم واحد.
- CSS selector لتحديد عنصر واحد.
- CSS selector all لتحديد مجموعة عناصر.
- عن طريق HTML DOM Collections كائنات جاهز مدمجة مع لغة جافا سكريبت.
البحث عن عنصر بواسطة id
البحث عن عنصر بواسطة id وحفظة بداخل متغير يحتوي المتغير علي جميع المعلومات الخاصة بالعنصر واصبح كائن به جميع الخصائص
إستخدام Id مباشر.
يمكنك إستخدام Id مباشرةً بدلاً من إستخدام دالة ()document.getElementById في لغة جافاسكريبت.
يمكن البحث عن عنصر أو اكثر عن طريق Class Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByClassName تكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم Class هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي نفس إسم الفئة Class داخل كائن HTMLCollection object حتي وإن كان عنصر واحد فقط واذا أردت التعامل مع أي عنصر بداخل HTMLCollection object يَجبُ عليك تحديد العنصر بواسطة index Number ويكون ذلك عن طريق علاملات Brackets [ ] وداخلها index Number.
get elements by Class Name
البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم الكلاس.
Print first Element
البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.
Print length
عدد العناصر التي تحمل نفس إسم Class الموجودة بداخل الكائن.
يمكن البحث عن عنصر أو اكثر عن طريق Tag Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByTagName تكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم Tag هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي اسم العنصر Tag Name داخل كائن HTMLCollection object حتي وأن كان عنصر واحد فقط واذا أردت التعامل مع أي عنصر بداخل HTMLCollection object يجب عليك تحديد العنصر بواسطة index Number ويكون ذلك عن طريق علاملات Brackets [ ] وداخلها index Number.
get elements by Tag Name
البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم Tag.
Print first Element
البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.
Print length
عدد العناصر التي تحمل نفس Tag Name الموجودة بداخل الكائن.
let paragraphs = document.getElementsByTagName('p');
document.write(paragraphs.length);يمكن البحث عن عنصر أو اكثر عن طريق Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByName تكتب بطريقة Camel Case نقوم بتمرير بداخلها name attribute هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي هذا الأسم داخل كائن HTMLCollection object حتي وأن كان عنصر واحد فقط واذا اردت التعامل مع أي عنصر بداخل HTMLCollection object يجب عليك تحديد العنصر بواسطة index Number.
- دالة ()getElementsByName تستخدم مع جميع العناصر التي تحتوي علي خاصية name لها نفس القيمة المحددة داخل الدالة.
get elements by Tag Name
البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم Tag.
Print first Element
البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.
Print length
عدد العناصر التي تحمل نفس Name الموجودة بداخل الكائن.
let paragraphs = document.getElementsByTagName('like');
document.write(paragraphs.length);Print Tag Name for Element
طباعة اسمة Tag Name لأي عنصر عن طريق جافا سكريبت
let paragraphs = document.getElementsByTagName('like');
document.write(paragraphs[0].tagName);يمكن البحث عن عنصر أو اكثر عن طريق CSS Selector وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()querySelectorAll أو ()querySelector تكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم CSS Selector هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي هذا Selector داخل كائن HTMLCollection object حتي وأن كان عنصر واحد فقط واذا اردت التعامل مع أي عنصر بداخل HTMLCollection object يجب عليك تحديد العنصر بواسطة index Number.
- دالة ()querySelectorAll تستخدم مع جميع العناصر التي لها نفس اسم CSS Selector class أو Tag Name.
CSS Selector All
البحث عن مجموعة عناصر عن طريق استخدام CSS Selector مشترك.
Print first Element
البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.
Print length
عدد العناصر التي تحمل نفس Selector الموجودة بداخل الكائن.
Use query Selector
يمكنك استخدام دالة ()querySelector لتحديد أول عنصر فقط الزي يحتوي علي نفس Selector.
Query Selector ID
يمكنك استخدام دالة ()querySelectorAll لتحديد عنصر فقط الزي يحتوي علي ID Name.
Query Selector Class
يمكنك استخدام دالة ()querySelectorAll لتحديد العناصر التي تحمل نفس Class Name.
تستخدم الخاصية activeElement في تحديد العنصر الذي يقع عليه التركيز focus في الشجرة DOM Tree.
- يمكن للمستخدم الضغط على مفتاح tab لنقل التركيز من عنصر الي عنصر مثل الانتقال من input الي input اخر داخل form أو النقر بزر الفأرة mouse علي العنصر.
خاصية active Element
تستخدم خاصية active Element مع العناصر التي يقع عليها التركيز فقط مثل input و button.
let x = document.activeElement.tagName;
document.getElementById("data").innerHTML = x;سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.