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