محدد الاستعلام ()
بشكل أساسي، يتم استخدام querySelector() مع 'this.template' الذي يقوم بجلب العناصر الموجودة في قالب معين. إذا كان هناك عناصر متعددة، فإنه سيتم النظر في العنصر الأول فقط. يتم إرجاع Null إذا كان العنصر المحدد غير موجود في القالب. يأخذ المحدد كمعلمة. يمكن أن تكون هذه علامة اسم الفئة. لن يتم دعم المعرف. في بعض الحالات، يكون لديك نفس الفئات ولكن بقيم مختلفة. في هذا السيناريو، نحتاج إلى استخدام data-recid الذي يحصل على العناصر بناءً على القيمة.
بناء الجملة:
دعونا نرى كيفية تحديد المحدد داخل querySelector().
- this.template.querySelector(محدد)
- this.template.querySelector('[data-recid=”القيمة”]')
على سبيل المثال: إذا كان المحدد هو علامة h1، فيجب عليك تحديده كـ 'h1'.
1. تستخدم جميع الأمثلة ملف 'meta.xml' هذا. لن نحدد ذلك في كل مثال. يمكن إضافة مكونات LWC إلى صفحة السجل أو صفحة التطبيق أو الصفحة الرئيسية.
'1.0' ?>
<الأهداف>
2. في جميع الأمثلة التي سنناقشها في هذا الدليل، يتم توفير المنطق كرمز 'js'. بعد ذلك نحدد لقطة الشاشة التي تتضمن كود “js” بالكامل.
مثال 1:
أولاً، نقوم بإنشاء علامات الأزرار h1 وdiv وspan وlightning مع بعض النص في ملف HTML. كما نقوم بإنشاء زر يحصل على العناصر السابقة عند النقر عليه. في ملف 'js'، نعيد النص الداخلي لكل هذه العناصر الأربعة من خلال this.template.querySelector().
firstExample.html
<قالب><متغير بطاقة البرق = 'ضيق' عنوان = 'مرحبًا' أيقونة- اسم = 'قياسي: حساب' >
< h1 > مرحبًا LinuxHint. أنا في h1 < / h1 >
< شعبة > مرحبًا LinuxHint. أنا في شعبة < / شعبة >
< فترة > مرحبًا LinuxHint. أنا في المدى < / فترة >
<مدخل البرق يكتب = 'نص' البديل = 'معيار' اسم = 'اسم' ملصق = 'إدخال النص' >
مرحبًا LinuxHint. أنا في مدخلات البرق < / مدخلات البرق>
<متغير زر البرق = 'قاعدة' ملصق = 'الحصول على التفاصيل' عند النقر = { احصل على التفاصيل } >< / زر البرق>
< / بطاقة البرق>
< / القالب>
firstExample.js
احصل على التفاصيل ( ) {// احصل على النص الداخلي لعلامة h1.
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( 'ح1' ) . InnerText ) ;
// احصل على النص الداخلي لعلامة div.
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( 'شعبة' ) . InnerText ) ;
// احصل على النص الداخلي لعلامة الامتداد.
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( 'فترة' ) . InnerText ) ;
// احصل على النص الداخلي لإدخال البرق.
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( 'مدخلات البرق' ) . InnerText ) ;
}
الكود بالكامل:
انتاج:
أضف هذا المكون إلى صفحة 'السجل' لأي كائن (أضفناه إلى صفحة سجل الحساب). افحص هذه النافذة وانتقل إلى علامة التبويب 'وحدة التحكم'.
الآن، انقر فوق الزر 'الحصول على التفاصيل'. بعد ذلك، سترى أن النص الداخلي معروض على وحدة التحكم لجميع العناصر.
مثال 2:
استخدم المكون الذي تمت مناقشته في المثال 1. حدد العنصرين بالعلامة 'h1' في مكون HTML واستخدم querySelector() في ملف 'js' للحصول على النص الداخلي لـ 'h1'.
firstExample.html
<قالب><متغير بطاقة البرق = 'ضيق' عنوان = 'مرحبًا' أيقونة- اسم = 'قياسي: حساب' >
< h1 > مرحبًا LinuxHint. أنا الأول h1 < / h1 >
< h1 > مرحبًا LinuxHint. أنا الثاني h1 < / h1 >
<متغير زر البرق = 'قاعدة' ملصق = 'الحصول على التفاصيل' عند النقر = { احصل على التفاصيل } >< / زر البرق>
< / بطاقة البرق>
< / القالب>
firstExample.js
احصل على التفاصيل ( ) {// احصل على النص الداخلي لعلامة h1.
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( 'ح1' ) . InnerText ) ;
}
الكود بالكامل:
انتاج:
هناك عنصران بنفس العلامة. لذلك، يحدد querySelector() العنصر الأول فقط. عند النقر فوق الزر 'الحصول على التفاصيل'، سترى أول 'h1' ويتم إرجاع النص الداخلي في وحدة التحكم.
مثال 3:
يمكننا أيضًا تخزين querySelector() في متغير واستخدام هذا المتغير للحصول على النص الداخلي. لنقم بإنشاء علامة امتداد تحتوي على بعض النصوص ونعيد النص الداخلي إلى وحدة التحكم عن طريق تخزينه في متغير.
firstExample.html
<قالب><متغير بطاقة البرق = 'ضيق' عنوان = 'مرحبًا' أيقونة- اسم = 'قياسي: حساب' >
< فترة > مرحبًا LinuxHint. أنا تمتد < / فترة >< ر >
<متغير زر البرق = 'قاعدة' ملصق = 'الحصول على التفاصيل' عند النقر = { احصل على التفاصيل } >< / زر البرق>
< / بطاقة البرق>
< / القالب>
firstExample.js
احصل على التفاصيل ( ) {// احصل على النص الداخلي لعلامة الامتداد.
دعه = هذا . نموذج . querySelector ( 'فترة' ) . InnerText
وحدة التحكم. سجل ( هو ) ;
}
الكود بالكامل:
انتاج:
مثال 4:
في هذا المثال، قمنا بإنشاء زر وإدخال نص (إدخال البرق) الذي سيأخذ الموضوع كسلسلة. نقوم بتمرير 'الإدخال السريع' كمحدد إلى طريقة querySelector(). تم تعيينه للمتغير 'المتعلق بالكمبيوتر'. عند النقر على هذا الزر، يتم عرض القيمة الموجودة في هذا المتغير.
SecondExample.html
<قالب><بطاقة البرق عنوان = 'موضوع' >
< مركز >
<مدخل البرق ملصق = 'أدخل الموضوع' قيمة = { متعلق بالحاسوب } >< / مدخلات البرق>
< ص > موضوعك هو : < ب > {متعلق بالحاسوب} < / ب > < / ص >
< / مركز >
<زر البرق ملصق = 'اختر هنا' عند النقر = { HandleSubject } >< / زر البرق>
< / بطاقة البرق>
< / القالب>
SecondExample.js
متعلق بالحاسوبHandleSubject ( حدث ) {
هذا . متعلق بالحاسوب = هذا . نموذج . querySelector ( 'مدخل البرق' ) . قيمة ;
}
الكود بالكامل:
انتاج:
مثال 5:
هنا، نستخدم إعادة البيانات. لنقم بإنشاء زر يحتوي على ثلاث علامات امتداد مع كتابة 'Span1' و'Span2' و'Span3' في ملف HTML. حدد النطاق الأول عن طريق تمرير 'Span1' إلى سجل البيانات في querySelector().
ThirdExample.html
<قالب><بطاقة البرق عنوان = 'التحديد بناءً على معرف البيانات' >
< فترة إعادة البيانات = 'سبان1' > أنا في النطاق -1 < / فترة >< ر >
< فترة إعادة البيانات = 'سبان 2' > انا في النطاق 2 < / فترة >< ر >
< فترة إعادة البيانات = 'Span3' > أنا في النطاق 3 < / فترة >< ر >
<متغير زر البرق = 'قاعدة' ملصق = 'الحصول على التفاصيل' عند النقر = { احصل على التفاصيل } >< / زر البرق>
< / بطاقة البرق>
< / القالب>
ThirdExample.js
احصل على التفاصيل ( ) {// احصل على النص الداخلي لـ Span1
وحدة التحكم. سجل ( هذا . نموذج . querySelector ( '[بيانات-recid='Span1']' ) . InnerText ) ;
}
الكود بالكامل:
انتاج:
خاتمة
لقد تعلمنا كيفية استخدام querySelector() للوصول إلى عناصر DOM. استخدم querySelector() 'this.template' لتحديد العناصر الموجودة في القالب الحالي. من الممكن تخزين هذا في متغير أو استخدامه مباشرة. وقد ذكر كلاهما مع الأمثلة. كما قدمنا مثالاً يتضمن عناصر متعددة. في هذه الحالة، يقوم querySelector() بإرجاع العنصر الأول.