JavaScript

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

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

التاريخ

06 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

2743

المواضيع

24
الشروحات chevron_left JavaScript DOM Get Elements chevron_left JavaScript

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

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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 وحفظة بداخل متغير يحتوي المتغير علي جميع المعلومات الخاصة بالعنصر واصبح كائن به جميع الخصائص

let apple = document.getElementById('apple');
إستخدام Id مباشر.

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

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

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

let texts = document.getElementsByClassName('text');
console.log(texts);
Print first Element

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

let texts = document.getElementsByClassName('text');
console.log(texts[0]);
Print length

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

let texts = document.getElementsByClassName('text');
document.write(texts.length)
ملاحظة
يتم ارجاع عن طريق دالة getElementsByClassName بداخل كائن HTMLCollection object حتي وأن كان عنصر واحد في صفحة HTML يحمل هذا Class اذاً انت بحاجه الي استخدام index Number.

</> 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.

let paragraphs= document.getElementsByTagName('p');
console.log(paragraphs);
Print first Element

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

let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0]);
Print length

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

let paragraphs = document.getElementsByTagName('p');
document.write(paragraphs.length);
ملاحظة
يتم ارجاع عن طريق دالة getElementsByTagName بداخل كائن HTMLCollection object حتي وأن كان عنصر واحد في صفحة HTML يحمل هذا Tag Name اذاً انت بحاجه الي استخدام index Number.

</> 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.

let paragraphs= document.getElementsByName('like');
console.log(paragraphs);
Print first Element

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

let paragraphs = document.getElementsByTagName('like');
console.log(paragraphs[0]);
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);
ملاحظة
يتم ارجاع عن طريق دالة getElementsByName بداخل كائن HTMLCollection object حتي وأن كان عنصر واحد في صفحة HTML يحمل هذا Name اذاً انت بحاجه الي استخدام index Number.

</> 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 مشترك.

let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
Print first Element

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

let paragraphs = document.querySelectorAll('p');
console.log(paragraphs[0]);
Print length

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

let paragraphs = document.querySelectorAll('p');
document.write(paragraphs.length);
Use query Selector

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

let paragraph = document.querySelector('p');
console.log(paragraph);
Query Selector ID

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

let paragraph = document.querySelector("#first");
console.log(paragraph);
Query Selector Class

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

let paragraph = document.querySelectorAll(".para");
console.log(paragraph);
ملاحظة
  • يتم ارجاع عن طريق دالة getElementsByName بداخل كائن HTMLCollection object حتي وأن كان عنصر واحد في صفحة HTML يحمل هذا الكلاس اذاً انت بحاجه الي استخدام index Number.
  • Query Selector غير مدعومة في IE8.

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

تستخدم الخاصية 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;
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات