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

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

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

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

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

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

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