انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: البحث علي عنصر داخل صفحة HTML في لغة جافا سكريبت

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

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

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن البحث عن عنصر أو اكثر عن طريق 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)
جرّب بنفسك

جميع فقرات هذا الدرس (البحث علي عنصر داخل صفحة HTML في لغة جافا سكريبت)