جافاسكربتالوصول لعناصر الصفحة
- محددات العناصر
- الوصول للعنصر من خلال id خاص به
- الوصول للعنصر من خلال class يملكه
- الوصول للعنصر من خلال إسم الوسم
- الوصول للعنصر من بأسلوب CSS
- المرور على العناصر بواسطة حلقة
محددات العناصر
الكائن document الذي تبنيه جافاسكربت لصفحات الويب التي يتم استعراضها بواسطة المتصفح يوفر العديد من الدوال التي يمكن استخدامها للوصول لأي عنصر موجود في الصفحة سواء من خلال أسماء الوسوم أو من خلال أسماء الخصائص التي تملكها.
في هذا الدرس ستتعلم كيفية الوصول لعناصر الصفحة بواسطة الدوال التالية:
- document.getElementById()
- document.getElementsByClassName()
- document.getElementsByTagName()
- document.querySelector()
- document.querySelectorAll()
هذه الدوال تعطيك كائنات تمثل العناصر الحقيقية الموجودة في الصفحة مما يعني أن أي تعديل تجريه على الكائنات فإنه يتم تطبيقه على العناصر نفسها.
الوصول للعنصر من خلال id خاص به
إذا كان العنصر يملك id ما فيمكنك استخدام الدالة document.getElementById() للوصول إليه من خلاله.
بين أقواس الدالة يجب تمرير id العنصر كنص.
في المثال التالي قمنا بإنشاء كائن يمثل العنصر الذي يملك id يساوي demo
و من بعدها قمنا بتغيير محتواه.
مثال
في حال وجود أكثر من عنصر في الصفحة عندهم نفس الـid فإن الدالة سترجع أول عنصر يملكه فقط.
الوصول للعنصر من خلال class يملكه
إذا كان لديك عنصر أو أكثر يملكون class ما فيمكنك استخدام الدالة document.getElementsByClassName() للوصول إليهم جميعاً من خلاله.
بين أقواس الدالة يجب تمرير class كنص.
هذه الدالة ترجع مصفوفة ( Array ) فيها كل العناصر التي يتم إيجادها.
في المثال التالي قمنا بإنشاء مصفوفة كائنات تمثل العناصر التي تملك class يساوي demo
و من بعدها قمنا بتغيير محتواهم.
مثال
الوصول للعنصر من خلال إسم الوسم
إذا كان لديك عنصر أو أكثر من نفس النوع يمكنك استخدام الدالة document.getElementsByTagName() للوصول إليهم جميعاً من خلاله.
بين أقواس الدالة يجب تمرير إسم الوسم كنص.
هذه الدالة ترجع مصفوفة ( Array ) فيها كل العناصر التي يتم إيجادها.
في المثال التالي قمنا بإنشاء مصفوفة كائنات تمثل العناصر التي نوعها <p> و من بعدها قمنا بتغيير محتواهم.
مثال
الوصول للعنصر من بأسلوب CSS
إذا أردت الوصول للعناصر بنفس الطريقة التي يمكنك فعلها في CSS فيمكنك استخدام إحدى هاتين الدالتين:
- document.querySelector() تستخدم للحصول على أول عنصر يتم إيجاده.
- document.querySelectorAll() تستخدم للحصول على جميع العناصر التي يتم إيجادها و ترجعهم كمصفوفة.
بغض النظر عن الدالة التي تستخدمها منهما فإنه يجب تمرير المحدد ( Selector ) لها كنص.
في المثال التالي قمنا بإنشاء كائن يمثل أول وسم <p> يملك class يساوي demo
يتم إيجاده و من بعدها قمنا بتغيير محتواه.
المثال الأول
في المثال التالي قمنا بإنشاء مصفوفة كائنات تمثل الوسوم التي نوعها <p> و تملك class يساوي demo
و من بعدها قمنا بتغيير محتواهم.
المثال الثاني
المرور على العناصر بواسطة حلقة
في حال أردت إجراء على عدة عناصر في الصفحة، فيمكنك تخزينهم في مصفوفة و من ثم المرور عليهم وحداً تلو الآخر باستخدام حلقة.
في المثال التالي قمنا بإنشاء مصفوفة كائنات تمثل الوسوم التي نوعها <h2> و من ثم قمنا بتعديل النص الموجود فيها بحيث أضفنا ترقيم في أولها.