مطابقة اسم عنصر البدل مع "querySelector ()" و"querySelectorAll ()" في JavaScript

المشكلة:

يمكن أن يكون الاستعلام عن مستند XML يحتوي على عناصر تحتوي على سلاسل محددة مضمنة في أسمائها أمرًا صعبًا. على الرغم من أن CSS يدعم أحرف البدل لاستعلامات السمات، يبدو أن الوظيفة نفسها مفقودة بالنسبة لأسماء العناصر.

الحل:

لسوء الحظ، لا توجد طريقة مباشرة لمطابقة عنصر البدل الأسماء باستخدام "querySelector()" أو "querySelectorAll()". ومع ذلك، هناك طرق بديلة:

• مطابقة السمات: يوفر CSS أحرف البدل لقيم السمات. لمطابقة العناصر التي تحتوي على سلسلة معينة في اسمها، ابحث عن وجود تلك السلسلة ضمن أي من سماتها باستخدام بناء الجملة التالي:

  • [attribute^='value'] يطابق العناصر التي تبدأ سمتها بـ "قيمة".
  • [attribute$='value'] يطابق العناصر التي تنتهي سمتها بـ "قيمة".
  • [attribute*='value'] يطابق العناصر التي تحتوي سمتها على "قيمة". "القيمة".
• سمة الاسم: إذا كنت مهتمًا بمطابقة سمة "الاسم"، فما عليك سوى استبدال "المعرف" بـ "الاسم" في ما سبق. تعبيرات.

مثال:

للعثور على جميع العناصر التي تحتوي على السلسلة "name" في سمة "name" الخاصة بها، يمكنك use:

const elementsWithName = document.querySelectorAll('[name*="name"]');

ملاحظة:

إذا كنت تبحث عن مطابقة أحرف البدل لاسم علامة العنصر نفسه، فلا يوجد حاليًا حل مباشر باستخدام "querySelector()" أو "querySelectorAll()".