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

البحث علي عنصر داخل صفحة HTML في لغة جافا سكريبتJavaScript DOM Get Elements

ستتعلم في هذا الدرس كيفية البحث عن أي عنصر داخل الشجرة DOM Tree والبحث يتم عن طريق id Name أو عن طريق Class Name أو عن طريق Tag Name أو عن طريق CSS Selectors وايضاً سوف تتعلم كيفية تخزينة بداخل متغير أو مصفوفة لكي تقوم بطباعة بياناته أو للتعديل أو الحذف.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
19
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,904
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

JavaScript DOM Elements التعامل مع عناصر صفحة HTML في لغة جافا سكريبت

يجب عليك عند التعامل مع صفحة 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 كائنات جاهز مدمجة مع لغة جافا سكريبت.

Get element by id JavaScript البحث عن عنصر بواسطة id في جافا سكريبت

يمكن البحث عن عنصر عن طريق id Name وذلك عن طريق دالة مُجهزة ومُدمجة مع لغة جافا سكريبت وهي ()getElementById تُكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم ID ويجب أن يكون الأسم فريداً في صفحة HTML بمعني أن يكون الإسم غير مُكرر.

البحث عن عنصر بواسطة id

البحث عن عنصر بواسطة id وحفظة بداخل متغير يحتوي المتغير علي جميع المعلومات الخاصة بالعنصر واصبح كائن به جميع الخصائص

HTML 
let apple = document.getElementById('apple');
جرّب بنفسك

إستخدام Id مباشر.

يمكنك إستخدام Id مباشرةً بدلاً من إستخدام دالة ()document.getElementById في لغة جافاسكريبت.

HTML 
console.log(apple);
جرّب بنفسك

Get elements by class name in JavaScript البحث عن مجموعة عناصر بواسطة class في جافا سكريبت

يمكن البحث عن عنصر أو اكثر عن طريق Class Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByClassName تكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم Class هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي نفس إسم الفئة Class داخل كائن HTMLCollection object حتي وإن كان عنصر واحد فقط واذا أردت التعامل مع أي عنصر بداخل HTMLCollection object يَجبُ عليك تحديد العنصر بواسطة index Number ويكون ذلك عن طريق علاملات Brackets [ ] وداخلها index Number.

get elements by Class Name

البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم الكلاس.

HTML 
let texts = document.getElementsByClassName('text');
console.log(texts);
جرّب بنفسك

Print first Element

البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.

HTML 
let texts = document.getElementsByClassName('text');
console.log(texts[0]);
جرّب بنفسك

Print length

عدد العناصر التي تحمل نفس إسم Class الموجودة بداخل الكائن.

HTML 
let texts = document.getElementsByClassName('text');
document.write(texts.length)
جرّب بنفسك

Get elements by tag name in JavaScript البحث عن مجموعة عناصر بواسطة tag name في جافا سكريبت

يمكن البحث عن عنصر أو اكثر عن طريق Tag Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByTagName تكتب بطريقة Camel Case نقوم بتمرير بداخلها اسم Tag هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي  اسم العنصر  Tag Name داخل كائن HTMLCollection object حتي وأن كان عنصر واحد فقط واذا أردت التعامل مع أي عنصر بداخل HTMLCollection object يجب عليك تحديد العنصر بواسطة  index Number  ويكون ذلك عن طريق علاملات Brackets [ ] وداخلها index Number.

get elements by Tag Name

البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم Tag.

HTML 
let paragraphs= document.getElementsByTagName('p');
console.log(paragraphs);
جرّب بنفسك

Print first Element

البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.

HTML 
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0]);
جرّب بنفسك

Print length

عدد العناصر التي تحمل نفس Tag Name الموجودة بداخل الكائن.

HTML 
let paragraphs = document.getElementsByTagName('p');
document.write(paragraphs.length);
جرّب بنفسك

Get elements by name in JavaScript البحث عن مجموعة عناصر بواسطة name في جافا سكريبت

يمكن البحث عن عنصر أو اكثر عن طريق Name وذلك عن طريقة دالة مجهزة ومدمجة مع لغة جافا سكريبت وهي ()getElementsByName تكتب بطريقة Camel Case نقوم بتمرير بداخلها name attribute  هذة الدالة تقوم بصف جميع العناصر التي تحتوي علي هذا الأسم داخل كائن HTMLCollection object حتي وأن كان عنصر واحد فقط واذا اردت التعامل مع أي عنصر بداخل HTMLCollection object يجب عليك تحديد العنصر بواسطة index Number.

  • دالة ()getElementsByName تستخدم مع جميع العناصر التي تحتوي علي خاصية name لها نفس القيمة المحددة داخل الدالة.

get elements by Tag Name

البحث عن مجموعة عناصر عن طريق استخدام اسم مشترك وهو اسم Tag.

HTML 
let paragraphs= document.getElementsByName('like');
console.log(paragraphs);
جرّب بنفسك

Print first Element

البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.

HTML 
let paragraphs = document.getElementsByTagName('like');
console.log(paragraphs[0]);
جرّب بنفسك

Print length

عدد العناصر التي تحمل نفس Name الموجودة بداخل الكائن.

HTML 
let paragraphs = document.getElementsByTagName('like');
document.write(paragraphs.length);
جرّب بنفسك

Print Tag Name for Element

طباعة اسمة Tag Name لأي عنصر عن طريق جافا سكريبت

HTML 
let paragraphs = document.getElementsByTagName('like');
document.write(paragraphs[0].tagName);
جرّب بنفسك

Get elements by css selectors in JavaScript البحث عن مجموعة عناصر بواسطة css selectors في جافا سكريبت

يمكن البحث عن عنصر أو اكثر عن طريق 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 مشترك.

HTML 
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
جرّب بنفسك

Print first Element

البحث عن مجموعة عناصر ثم طباعة أول عنصر فقط من الكائن.

HTML 
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs[0]);
جرّب بنفسك

Print length

عدد العناصر التي تحمل نفس Selector الموجودة بداخل الكائن.

HTML 
let paragraphs = document.querySelectorAll('p');
document.write(paragraphs.length);
جرّب بنفسك

Use query Selector

يمكنك استخدام دالة ()querySelector لتحديد أول عنصر فقط الزي يحتوي علي نفس Selector.

HTML 
let paragraph = document.querySelector('p');
console.log(paragraph);
جرّب بنفسك

Query Selector ID

يمكنك استخدام دالة ()querySelectorAll لتحديد عنصر فقط الزي يحتوي علي ID Name.

HTML 
let paragraph = document.querySelector("#first");
console.log(paragraph);
جرّب بنفسك

Query Selector Class

يمكنك استخدام دالة ()querySelectorAll لتحديد العناصر التي تحمل نفس Class Name.

HTML 
let paragraph = document.querySelectorAll(".para");
console.log(paragraph);
جرّب بنفسك

Get active element Dom in JavaScript البحث عن العنصر الذي يقع علية التركيز focus في لغة جافا سكريبت

تستخدم الخاصية activeElement في تحديد العنصر الذي يقع عليه التركيز focus في الشجرة DOM Tree.

  •  يمكن للمستخدم الضغط على مفتاح tab لنقل التركيز من عنصر الي عنصر مثل الانتقال من input الي input اخر داخل form أو النقر بزر الفأرة mouse علي العنصر.

خاصية active Element

تستخدم خاصية active Element مع العناصر التي يقع عليها التركيز فقط مثل input و button.

HTML 
let x = document.activeElement.tagName;
document.getElementById("data").innerHTML = x;
جرّب بنفسك

مشاركة

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

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