في JavaScript ، فإن ' الاستعلاممحدد الكل () ”يسترد العنصر الأول الذي يطابق تمامًا محددات CSS المحددة. تبدأ هذه الطريقة في اجتياز شجرة DOM لتنفيذ هذه المهمة. بمجرد العثور على العنصر ، فإنه يطبق خصائص أو أساليب JavaScript المضمنة المحددة في قسم البرنامج النصي لأداء مهام خاصة. تستخدم هذه الطريقة عادة لتحديد العناصر المستهدفة حسب المتطلبات. يسمح للمستخدمين بتحديد جميع العناصر التي تطابق المحدد المحدد أو العنصر المعين الموضوع في الفهرس المحدد.
يوضح هذا الدليل استخدام طريقة 'querySelectorAll ()' في JavaScript.
كيفية استخدام طريقة 'querySelectorAll ()' في JavaScript؟
لاستخدام ال ' الاستعلاممحدد الكل () '، حدد محدد CSS كوسيطة لها. تتضمن محددات CSS 'النوع والفئة والمعرف'. إذا كان محدد CSS غير صالح ، فإنه يقوم بإرجاع خطأ في بناء الجملة ، وإلا فإنه يقوم بإرجاع كائن NodeList ثابت كإخراج قياسي.
بناء الجملة
document.querySelectorAll ( محددات CSS )
في الصيغة أعلاه ، ' محددات CSS 'يشير إلى جميع محددات CSS الصالحة.
دعونا نستخدم بناء الجملة المحدد أعلاه عمليا.
كود HTML
نظرة عامة على كود HTML المحدد:
< h2 فصل = 'عرض' > العنوان الأول h2 >< h3 فصل = 'عرض' > العنوان الثاني h3 >
< ص فصل = 'عرض' > الفقرة الأولى ص >
< ص فصل = 'عرض' > الفقرة الثانية ص >
< زر عند النقر = 'jsFunc ()' > انقر هنا ! زر >
في سطور التعليمات البرمجية أعلاه:
- ال ' تضيف العلامة 'عنوانًا فرعيًا به الفئة' عرض توضيحي '.
- ال ' تحدد العلامة 'عنوانًا فرعيًا ثانيًا بنفس الفئة المسماة' demo '.
- ال ' تتضمن العلامات عبارات الفقرة التي لها نفس الفئة ، أي 'عرض توضيحي'.
- ال ' <زر> تتضمن العلامة 'زرًا جديدًا مع حدث الماوس' onclick 'لتنفيذ وظيفة' jsFunc () '.
ملحوظة: يتم اتباع كود HTML الخاص في هذا الدليل.
مثال 1: تطبيق طريقة 'querySelectorAll ()' لتحديد العناصر التي لها نفس الفئة وتغيير ألوانها
يستخدم هذا المثال طريقة 'querySelectorAll ()' لتحديد كل العناصر التي تستخدم الفئة 'demo'.
كود جافا سكريبت
دعونا نلقي نظرة عامة على الكود المذكور أدناه:
< النصي >وظيفة شبيبة ( ) {
قائمة const = document.querySelectorAll ( '.demo' ) ؛
ل ( يترك أنا = 0 ؛ أنا < قائمة الطول. أنا ++ ) {
قائمة [ أنا ] .style.color = 'أحمر برتقالي' ؛
}
}
النصي >
في سطور الكود أعلاه:
- ال ' jsFunc () يتم تعريف الوظيفة.
- في تعريفه ، يستخدم المتغير 'list' الاستعلاممحدد الكل () 'لتحديد جميع العناصر التي تحتوي على الفئة' demo '.
- بعد ذلك ، ' ل 'حلقة تهيئ قائمة عقدة للتكرار على طول جميع عناصر HTML التي تم العثور عليها والتي تحتوي على الفئة' تجريبي 'وتغيير لون النص باستخدام' النمط. اللون ' ملكية.
انتاج |
في الإخراج أعلاه ، يمكن ملاحظة أن لون نص العناصر المكونة لنفس اسم الفئة ، أي 'عرض توضيحي' يتم تغييره عند النقر فوق الزر.
مثال 2: تطبيق أسلوب 'querySelectorAll ()' لتحديد العناصر المفهرسة المحددة
بصرف النظر عن جميع العناصر ، يمكن للمستخدم أيضًا تحديد العنصر المفهرس المحدد الذي يحتوي على الفئة 'demo'.
كود جافا سكريبت
ضع في اعتبارك رمز JavaScript المحدد:
< النصي >وظيفة شبيبة ( ) {
قائمة const = document.querySelectorAll ( 'h2.demo' ) ؛
قائمة [ 0 ] .style.color = 'أخضر' ؛
}
النصي >
في مقتطف الشفرة أعلاه:
- يختار المتغير 'list' عنصر 'h2' الذي يكون صنفه 'demo' بمساعدة العنصر ' الاستعلاممحدد الكل () ' طريقة.
- بعد ذلك ، يحدد متغير 'list' فهرس العنصر 'h2' لتغيير لون نص العنصر 'H2' الموضوع في الفهرس '0'.
انتاج |
يُظهر الإخراج أن لون نص عنصر 'H2' الموضوع عند صفر فهرس قد تغير الفئة 'demo' عند النقر فوق الزر.
مثال 3: تطبيق أسلوب 'querySelectorAll ()' للحصول على عدد العناصر التي لها نفس الفئة
يسترد هذا المثال عدد العناصر التي لها نفس الفئة باستخدام طريقة 'querySelectorAll ()'.
كود HTML
أولاً ، ألق نظرة على كود HTML المعدل لـ 'المثال 1':
< ص بطاقة تعريف = 'ل' > ص >
في كود HTML المذكور أعلاه ، قم بإلحاق فقرة فارغة بالمعرف 'الفقرة' في نهاية كود HTML 'المثال 1'.
كود جافا سكريبت
الآن ، تابع مع كود JavaScript:
< النصي >وظيفة شبيبة ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ؛
document.getElementById ( 'ل' ) .innerHTML = nodelist.length ؛
}
النصي >
وفقًا لمقتطف الشفرة أعلاه:
- تحدد الوظيفة 'jsFunc ()' أولاً جميع عناصر '
' باستخدام ' الاستعلاممحدد الكل () ' طريقة.
- بعد ذلك ، ' getElementById () يصل أسلوب 'إلى الفقرة الفارغة المضافة من خلال معرف' الفقرة 'لإلحاقها بالقيمة التي تم إرجاعها لخاصية' الطول 'المطبقة.
انتاج |
كما رأينا ، يُظهر الناتج أعلاه إجمالي '4' عناصر تتطابق مع محدد فئة CSS المحدد 'demo'.
خاتمة
ال ' الاستعلاممحدد الكل () يمكن استخدام طريقة ”بسهولة عن طريق تحديد محدد CSS كقيمته. تتطابق هذه الطريقة مع كل عنصر من عناصر HTML وتختار العناصر التي تطابق المحدد المحدد. بمجرد تحديد العناصر ، فإنه يؤدي المهمة المطلوبة عليها المحددة في قسم البرنامج النصي. يوضح هذا الدليل بإيجاز استخدام طريقة 'querySelectorAll ()' في JavaScript.